首页修改

TEAMModelOS.SmartTeach/ClientApp/components/resource/home.vue

@@ -38,13 +38,13 @@
       <h1>开通智慧学校</h1>
       <div class="box"></div>
     </div>
-    <img src="../../assets/image/resource/center01.png">
+    <img src="../../assets/image/resource/center001.png">
     <div class="arrow">
       <img src="../../assets/image/resource/arrow.png">
       <h1>开通智慧云平台</h1>
       <div class="box"></div>
     </div>
-    <img src="../../assets/image/resource/bottom.png" style="width:100%">
+    <img src="../../assets/image/resource/botton.png" style="width:100%">
     <div class="arrow">
       <img src="../../assets/image/resource/arrow.png" >
       <h1>联系我们</h1>
@@ -60,7 +60,7 @@
       return {
         homeCarouselImg: [
           {
-            images: require('../../assets/image/resource/banner02.png')
+            images: require('../../assets/image/resource/banner002.png')
           },
           {
             images: require('../../assets/image/resource/banner01.png')

TEAMModelOS.SmartTeach/ClientApp/components/resource/teacherMap.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="content">
-    <div class="map">
-      <span class="map-pro">四川省</span>
+    <div class="top">
+      <div class="map">
+        <span class="map-pro">{{countData.name}}</span>
 
-      <div class="my-map">
-        <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
-      </div>
-      <div class="chart">
-        <h1>15854</h1><h2>个</h2>
-        <span>名师工作室</span>
-        <ul>
-          <li><span>5215人</span><span>一线教师</span></li>
-          <li><span>5215个</span><span>资源</span></li>
-          <li><span>54546次</span><span>关注度</span></li>
-        </ul>
-        <!--<div id="Chart" :style="{width: '500px', height: '700px'}"></div>-->
+        <div class="my-map">
+          <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
+        </div>
+        <div class="chart">
+          <h1>{{countData.data}}</h1><h2>个</h2>
+          <h3>名师工作室</h3>
+          <ul>
+            <li><span>{{countData.teacher}}人</span><p>一线教师</p></li>
+            <li><span>{{countData.source}}个</span><p>资源</p></li>
+            <li><span>{{countData.focus}}次</span><p>关注度</p></li>
+          </ul>
+        </div>
       </div>
     </div>
+
     <div class="teacher-show">
       <div class="header">
         <h1 class="title ">名师展示</h1>
@@ -72,52 +74,19 @@
       </div>
     </div>
     <div class="data-view">
-      <div class="four">
-        <img src="https://css.huijiaoyun.com/tianyu_edu/html_other_edu/cd_good_school/images/four.png" alt="">
-      </div>
       <div class="resource-data">
-        <div class="data-item">
-          <div class="img-content">
-            <span class="data-view-teacher"></span>
-          </div>
-          <p class="data-name">名师总数</p>
-          <p class="number">13201</p>
-        </div>
-        <div class="data-item">
-          <div class="img-content">
-            <span class="data-view-member"></span>
-          </div>
-          <p class="data-name">成员总数</p>
-          <p class="number">57260</p>
-        </div>
-        <div class="data-item">
-          <div class="img-content">
-            <span class="data-view-article"></span>
-          </div>
-          <p class="data-name">文章总数</p>
-          <p class="number">15686</p>
-        </div>
-        <div class="data-item">
-          <div class="img-content">
-            <span class="data-view-active"></span>
-          </div>
-          <p class="data-name">活动总数</p>
-          <p class="number">38792</p>
-        </div>
-        <div class="data-item">
-          <div class="img-content">
-            <span class="data-view-resource"></span>
-          </div>
-          <p class="data-name">资源总数</p>
-          <p class="number">142890</p>
-        </div>
-        <div class="data-item">
-          <div class="img-content">
-            <span class="data-view-move"></span>
-          </div>
-          <p class="data-name">优课总数</p>
-          <p class="number">23446</p>
-        </div>
+        <ul>
+          <li>445585</li>
+          <li>856585</li>
+          <li>482655</li>
+        </ul>
+      </div>
+      <div class="resource">
+        <ul>
+          <li>6545585</li>
+          <li>152685</li>
+          <li>624585</li>
+        </ul>
       </div>
     </div>
   </div>
@@ -129,10 +98,39 @@
   export default {
     data() {
       return {
-        chart: null,
-        data: [],
-        total: 0,
         model1: '',
+        countData:[],
+        dataIndex: '',
+        countDatas: [
+          {
+            name: '四川省',
+            data:'14666',
+            teacher: '41654',
+            source: '599545',
+            focus:'454556'
+          },
+          {
+            name: '湖北省',
+            data: '14956',
+            teacher: '44944',
+            source: '544445',
+            focus: '45956'
+          },
+          {
+            name: '广东省',
+            data: '89966',
+            teacher: '41654',
+            source: '545445',
+            focus: '5416'
+          },
+          {
+            name: '云南省',
+            data: '14986',
+            teacher: '418794',
+            source: '545445',
+            focus: '45556'
+          }
+        ],
         periodList: [
           {
             value: 1,
@@ -214,38 +212,23 @@
             { provice: '四川', subject: '语文', img: require('../../assets/image/resource/people11.jpg'), title: '省级名师', name: '张浩然', period: '中学', text1: '成员', number1: '1060', text2: '资源', number2: '2800', text3: '热度', number3: '1500' },
           ]
           },
-        teacherData: [
-          {
-            "name": "高新区",
-            "value": 80
-          }, {
-            "name": "青羊区",
-            "value": 87
-          }, {
-            "name": "天府新区",
-            "value": 60
-          }, {
-            "name": "锦江区",
-            "value": 40
-          }, {
-            "name": "金牛区",
-            "value": 50
-          }, {
-            "name": "郫都区",
-            "value": 30
-          }, {
-            "name": "温江区",
-            "value": 40
-          }
-        ]
-
       };
     },
     mounted() {
       this.drawLine();
-      //this.drawChart();
       this.teacherList = this.teacher.datazt;
+      this.countData = this.countDatas[0]
     },
+    //computed: {
+    //  dataIndex: function () {
+    //    console.log('12111541');
+    //  }
+    //},
+    //watch: {
+    //  dataIndex() {
+    //    console.log('23612651');
+    //  },  
+    //},
     methods: {
       chooseSchool(data) {
         if (data == "zt") {
@@ -261,6 +244,18 @@
       teacherZone() {
         this.$router.push('/TeacherZone')
       },
+      choosePro(data) {
+        console.log(data, '5646464');
+        if (data == '0') {
+          this.countData = this.countDatas[0]
+        } else if (data == '2') {
+          this.countData = this.countDatas[1]
+        }else if (data == '1') {
+          this.countData = this.countDatas[2]
+        }else if (data == '3') {
+          this.countData = this.countDatas[3]
+        }
+      },
       drawLine() {
         var mapChart = echarts.init(document.getElementById('myChart'));
         // mapChart的配置
@@ -294,7 +289,7 @@
               normal: {
                 borderWidth: .5,//区域边框宽度
                 borderColor: '#666',//区域边框颜色
-                areaColor: "#fff",//区域颜色
+                areaColor: "lightblue",//区域颜色
                 //background-image: linear-gradient(135deg, #f5f7fa 0 %, #c3cfe2 100 %);
               },
               emphasis: {
@@ -307,158 +302,49 @@
               { name: '四川', selected: true },//福建为选中状态
               { name: '广东', selected: true },//福建为选中状态
               { name: '湖北', selected: true },//福建为选中状态
+              { name: '云南', selected: true },//福建为选中状态
             ]
           }],
         }
         mapChart.setOption(option);
-        mapChart.on('click', function (params) {
-          this.dataIndex = params.dataIndex;
-          console.log(params);
+        mapChart.on('click', (params) => {
+          let data = params.dataIndex;
+          this.choosePro(data);
         });
       },
-      //drawChart() {
-      //  var myChart = echarts.init(document.getElementById('Chart'));
-      //  var xData = [],
-      //    yData = [];
-      //  var min = 50; // 最小值的定义
-      //  this.teacherData.map(function (a, b) {
-      //    xData.push(a.name);
-      //    if (a.value === 0) {
-      //      yData.push(a.value + min);
-      //    } else {
-      //      yData.push(a.value);
-      //    }
-      //  });
-      //  var option = {
-      //    //color: ['#3398DB'],
-      //    tooltip: {
-      //      trigger: 'axis',
-      //      axisPointer: {
-      //        type: 'line',
-      //        lineStyle: {
-      //          opacity: 0
-      //        }
-      //      },
-      //      formatter: function (prams) {
-      //        return "名师数：" + prams[0].data
-      //      }
-      //    },
-      //    grid: {
-      //      left: '0%',
-      //      right: '0%',
-      //      bottom: '5%',
-      //      top: '5%',
-      //      height: '50%',
-      //      containLabel: true,
-      //      z: 22
-      //    },
-      //    xAxis: [{
-      //      type: 'category',
-      //      gridIndex: 0,
-      //      data: xData,
-      //      axisTick: {
-      //        alignWithLabel: true
-      //      },
-      //      axisLine: {
-      //        lineStyle: {
-      //          color: '#0c3b71'
-      //        }
-      //      },
-      //      axisLabel: {
-      //        show: true,
-      //        color: 'rgb(170,170,170)',
-      //        fontSize: 12
-      //      }
-      //    }],
-      //    yAxis: [{
-      //      type: 'value',
-      //      gridIndex: 0,
-      //      splitLine: {
-      //        show: true
-      //      },
-      //      axisTick: {
-      //        show: true
-      //      },
-      //      max: 150,
-      //      axisLine: {
-      //        lineStyle: {
-      //          color: '#0c3b71'
-      //        }
-      //      },
-      //      axisLabel: {
-      //        color: 'rgb(170,170,170)',
-      //        formatter: '{value} '
-      //      }
-      //    },
-      //    {
-      //      type: 'value',
-      //      gridIndex: 0,
-      //      max: 200,
-      //    }
-      //    ],
-      //    series: [{
-      //      type: 'bar',
-      //      barWidth: '20',
-      //      xAxisIndex: 0,
-      //      yAxisIndex: 0,
-      //      itemStyle: {
-      //        normal: {
-      //          //barBorderRadius: [30, 30, 0, 0],
-      //          color: new echarts.graphic.LinearGradient(
-      //            0, 0, 0, 1, [
-      //              //  {
-      //              //  offset: 0,
-      //              //  color: '#00feff'
-      //              //},
-      //              {
-      //                offset: 0.5,
-      //                color: '#4da1ff'
-      //              },
-      //              {
-      //                offset: 1,
-      //                color: '#4da1ff'
-      //              }
-      //            ]
-      //          )
-      //        }
-      //      },
-      //      data: yData,
-      //      zlevel: 11
-
-      //    },
-      //    ]
-      //  };
-      //  myChart.setOption(option);
-      //}
     },
     
   }
 </script>
 <style scoped>
+  .top {
+    width: 100%;
+    background: -webkit-linear-gradient(left, #FFD3AC,#FFC381);
+  }
   .map {
     width: 65%;
     height: 600px;
     margin: auto;
     /*margin-left:150px;*/
     padding-left: 250px;
-    background: url("../../assets/image/resource/map-bg.png") no-repeat;
+    background: url("../../assets/image/resource/map-bg.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    /*display:flex;*/
   }
   .map-pro {
     display: block;
     padding-top: 13%;
     margin-left: 2%;
-    font-size: 24px;
+    font-size: 25px;
     font-weight: 800;
-    color: orangered;
+    color: #f05053;
   }
   .my-map {
     height: 600px;
     width: 600px;
     /*border: 1px solid red;*/
     /*text-align: right;*/
+    /*background-color:#555;*/
     margin-top: -15%;
     margin-left: 25%;
   }
@@ -470,23 +356,47 @@
     margin-left: -18%;
   }
   .chart h1{
-    color:coral;
+    color:gold;
+    margin-top:35px;
   }
     .chart h2 {
       display: block;
-      margin-top: -10%;
+      margin-top: -33px;
       margin-left: 25%;
+      font-size: 20px;
+      color: #fefefe;
+      font-weight: 800;
+    }
+    .chart h3 {
+      font-size:20px;
+      font-weight:800;
+      color:#fefefe;
     }
     .chart ul {
       list-style:none;
       width:150px;
+      margin-top:10%;
     }
     .chart li {
-      width: 150px;
+      width: 200px;
       height: 20px;
-      border: 1px solid red;
-      margin-bottom: 10px;
+      /*border: 1px solid red;*/
+      margin-bottom: 15px;
       border-radius: 25px;
+      background: -webkit-linear-gradient(left, #f05053, #f05053);
+    }
+    .chart span {
+      color:#fff;
+      font-size:14px;
+      margin-left:15px;
+    }
+    .chart p {
+      color: #fff;
+      font-size: 15px;
+      font-weight: 800;
+      display: block;
+      margin-left: 100px;
+      margin-top: -21px;
     }
   .header {
     width: 100%;
@@ -601,12 +511,12 @@
       font-weight: bold;
     }
     .teacher-info .subject {
-      width: 116px;
-      height: 24px;
+      width: 120px;
+      height: 25px;
       margin: 0 auto;
       -webkit-border-radius: 20px;
       border-radius: 20px;
-      background: -webkit-linear-gradient(left, #a1c4fd, #c2e9fb);
+      background: -webkit-linear-gradient(left, #ff7e56, #ffc77d);
     }
       .teacher-info .subject p span {
         display: inline-block;
@@ -618,6 +528,11 @@
         background: #fff;
         margin: 3px 6px;
       }
+      .teacher-info .subject p {
+        padding-top: 3px;
+        font-size: 12px;
+        font-weight: 800;
+      }
   .teacher-detailed {
     width: 100%;
     height: 60px;
@@ -635,9 +550,11 @@
   }
   .data-view {
     width: 100%;
-    height: 663px;
+    height: 650px;
     overflow: hidden;
-    background: url('../../assets/image/resource/data-view-bg.png') no-repeat center center;
+    background: url('../../assets/image/resource/teacher-bottom.png') no-repeat;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
   .four {
     width: 409px;
@@ -666,19 +583,41 @@
     margin-top: 10px;
   }
   .resource-data {
-    width: 1100px;
+    /*width: 1100px;*/
     height: 130px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    margin: 130px auto 0;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-justify-content: space-around;
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
+    /*text-align:left;*/
   }
+    .resource-data ul {
+      font-size: 25px;
+      font-weight: 800;
+      margin-top: 365px;
+      margin-left: 565px;
+    }
+      .resource-data ul li {
+        float: left;
+        width: 316px;
+        display: block;
+        font-size: 28px;
+        color:#ff705b;
+      }
+ .resource {
+    /*width: 1100px;*/
+    height: 130px;
+    /*text-align:left;*/
+  }
+  .resource ul {
+    font-size: 25px;
+    font-weight: 800;
+    margin-top: 48px;
+    margin-left: 565px;
+  }
+      .resource ul li {
+        float: left;
+        width: 316px;
+        display: block;
+        font-size: 28px;
+        color:#ff705b;
+      }
   .data-item {
     width: 130px;
     height: 100%;
@@ -689,42 +628,6 @@
     margin: 25px auto 17px;
     text-align: center;
   }
-  .data-view-teacher {
-    width: 43px;
-    height: 51px;
-    margin-top: 4px;
-    background: url('../../assets/image/resource/data-view-teacher.png') no-repeat;
-  }
-  .data-view-member {
-    width: 54px;
-    height: 33px;
-    margin-top: 13px;
-    background: url('../../assets/image/resource/data-view-member.png') no-repeat;
-  }
-  .data-view-article {
-    width: 46px;
-    height: 50px;
-    margin-top: 4px;
-    background: url('../../assets/image/resource/data-view-article.png') no-repeat;
-  }
-  .data-view-active {
-    width: 44px;
-    height: 50px;
-    margin-top: 4px;
-    background: url('../../assets/image/resource/data-view-active.png') no-repeat;
-  }
-  .data-view-resource {
-    width: 46px;
-    height: 50px;
-    margin-top: 4px;
-    background: url('../../assets/image/resource/data-view-resource.png') no-repeat;
-  }
-  .data-view-move {
-    width: 52px;
-    height: 50px;
-    margin-top: 4px;
-    background: url('../../assets/image/resource/data-view-move.png') no-repeat;
-  }
   .data-name {
     font-size: 18px;
     color: #555;