页面默认背景、首页锚点

src/layouts/header/index.vue

@@ -227,6 +227,7 @@ export default {
         width: 100%;
         height: $height;
         background-color: #fff;
+        box-shadow: 0px 0px 6px 0px rgba(178, 178, 178, 0.32);
         .inner{
             display: flex;
             justify-content: space-between;

src/layouts/home/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-03 14:33:21
- * @LastEditTime: 2021-11-04 20:23:02
+ * @LastEditTime: 2021-11-05 17:58:45
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \questionnaired:\code\FE_huoran_data\src\layouts\home\index.vue
@@ -57,6 +57,11 @@ export default {
             padding: 12px 80px 0;
             margin: 0 auto;
             background-color: #F3F6FA;
+            background: url(../../assets/img/shapes/shape1.png) 0 50px no-repeat,
+            url(../../assets/img/shapes/shape7.png) right 70px no-repeat,
+            url(../../assets/img/shapes/shape8.png) 0 574px no-repeat,
+            url(../../assets/img/shapes/shape9.png) right 645px no-repeat,
+            url(../../assets/img/shapes/shape6.png) 0 1074px no-repeat;
         }
         .index{
             padding: 0;

src/pages/data/list/index.vue

@@ -172,10 +172,12 @@
             </div>
             <img width="52" src="@/assets/img/close.png" style="cursor: pointer" alt="" @click="previewVisible = false">
           </div>
+          <div class="preview-wrap">
               <el-table :data="previewData" class="table" id="previewTable" stripe header-align="center" row-key="id">
                   <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                   <el-table-column v-for="(item,index) in previewHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column>
               </el-table>
+          </div>
         </el-drawer>
     </div>
 </template>
@@ -625,5 +627,9 @@ export default {
     }
     /deep/.preview-dia{
       padding: 20px;
+      .preview-wrap{
+        height: calc(100vh - 80px);
+        overflow: auto;
+      }
     }
 </style>

src/pages/index/list/index.vue

@@ -54,37 +54,37 @@
         <template v-else>
             <!-- 简介 -->
             <ul class="intro">
-                <li>
+                <li @click="toPart(1)">
                     <img src="@/assets/img/index/index1.png" alt="">
                     <div class="text">
                         <h6>平台概览</h6>
                         <p class="desc">了解数据平台一句话简介</p>
                     </div>
                 </li>
-                <li>
+                <li @click="toPart(2)">
                     <img src="@/assets/img/index/index2.png" alt="">
                     <div class="text">
                         <h6>平台特色与优势</h6>
                         <p class="desc">了解数据平台一句话简介</p>
                     </div>
                 </li>
-                <li>
+                <li @click="toPart(3)">
                     <img src="@/assets/img/index/index1.png" alt="">
                     <div class="text">
-                        <h6>平台概览</h6>
+                        <h6>平台产品介绍</h6>
                         <p class="desc">了解数据平台一句话简介</p>
                     </div>
                 </li>
             </ul>
             <!-- 关于 -->
-            <div class="about">
+            <div class="about" id="part1">
                 <div class="inner">
                     <h6 class="i-title">关于数据平台</h6>
                     <div class="desc">欢迎使用数据平台，这是我们的财经数据库。我们的数据涵盖股票数据，期货数据，债券数据，期权数据，利率数据，公募数据和宏观数据，拥有超40年的历史数据，可为您解读、预测、分析，模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台，并经过专业的数据分类和整理，可让用户轻松便捷地搜索并批量下载到自己研究所需的数据，极大地减轻自己搜索整理数据的时间，提高研究效率, 从而高效的输出研究成果。</div>
                 </div>
             </div>
             <!-- 特色与优势 -->
-            <div class="adv">
+            <div class="adv" id="part2">
                 <img src="@/assets/img/index/index8.png" alt="" class="shape shape1">
                 <img src="@/assets/img/index/index9.png" alt="" class="shape shape2">
                 <img src="@/assets/img/index/index10.png" alt="" class="shape shape3">
@@ -110,7 +110,7 @@
                 </div>
             </div>
             <!-- 产品展示 -->
-            <div class="product">
+            <div class="product" id="part3">
                 <div class="inner">
                     <h6 class="i-title">产品展示</h6>
                     <div class="pics">
@@ -258,6 +258,9 @@ export default {
                 })
                 window.open(route.href)
             }
+        },
+        toPart(i){
+            document.querySelector(`#part${i}`).scrollIntoView()
         }
     }
 };
@@ -394,6 +397,7 @@ export default {
             li{
                 display: inline-flex;
                 align-items: center;
+                cursor: pointer;
             }
             img{
                 width: 50px;

src/pages/stat/list/index.vue

@@ -69,7 +69,7 @@
                         <el-table-column prop="download" label="下载量" align="center"></el-table-column>
                         <el-table-column prop="click" label="点击量" align="center"></el-table-column>
                     </el-table>
-                    <div class="fold">
+                    <div class="fold" v-if="listData.length > 10">
                         <span :class="{active}" @click="toggleList">
                             展开更多
                             <i class="el-icon-arrow-down"></i>
@@ -190,26 +190,29 @@ export default {
             'setInfo'
         ]),
         getData(){
+            // 查询产品列表
             this.$get(`${this.api.getProductInfoBySchoolId}?schoolId=${this.schoolId}`).then(res => {
                 let list = res.message
                 list.map(n => {
+                    // 时间格式化
                     n.startTime = util.formatDate('yyyy-MM-dd',new Date(n.startTime))
                     n.endTime = util.formatDate('yyyy-MM-dd',new Date(n.endTime))
                 })
-                // this.productList = list
+                this.productList = list
                 if(list.length){
                     this.schoolName = list[0].schoolName
                 }
             }).catch(res => {})
-            
+            // 查询平均日访客量和累计下载
             this.$get(`${this.api.queryAccumulate}?schoolId=${this.schoolId}`).then(res => {
                 this.dayCount = res.dayCount
                 this.schoolCount = res.schoolCount
             }).catch(res => {})
-
+            // 查询按月份统计数据库使用概况
             this.$get(`${this.api.queryDatabaseInfoByMonth}?schoolId=${this.schoolId}`).then(res => {
                 let list = res.message
                 let result = []
+                // 每年的每个月份赋值
                 for(let i in list){
                     for(let n in list[i]){
                         let item = {
@@ -224,25 +227,26 @@ export default {
                 }
                 this.monthData = result
             }).catch(res => {})
-            
+            // 查询本校累计用户数量
             this.$get(`${this.api.getUserTotalBySchoolId}?schoolId=${this.schoolId}`).then(res => {
                 this.userCount = res.totalCount
             }).catch(res => {})
-
+            // 查询当前在线人数
             this.$get(this.api.onlineNumber).then(res => {
                 this.onlineCunt = res.message
             }).catch(res => {})
             this.getDatabase()
         },
+        // 查询按数据库统计使用概况
         getDatabase(){
             this.$get(`${this.api.queryDatabaseInfo}?schoolId=${this.schoolId}&startTime=${this.startTime}&endTime=${this.endTime}`).then(res => {
                 let list = JSON.parse(res.databaseInfo)
-                // 只展示前十条
+                // 只展示前十条，页面上点展开更多去展示全部
                 this.listData = list.slice(0,10)
-                this.listDataAll = list
+                this.listDataAll = list // 把全部数据先存起来，点展开的时候直接取这个列表
             }).catch(res => {})
         },
-        // 因为后端的数据存在redis了,所以无法做模糊查询,只能在前端实现
+        // 模糊查询，因为后端的数据存在redis了,所以无法做模糊查询,只能在前端实现
         searchData(){
             let list = this.listDataAll
             let result = []
@@ -273,7 +277,9 @@ export default {
         handleSelectionChange1(val) {
             this.multipleSelection1 = val
         },
+        // 展开收缩
         toggleList(){
+            // 如果是输入了关键词，则不是取默认的listDataAll列表，而是取模糊查询后的全部数据列表 listDataKeyword
             if(this.keyword){
                 if(this.active){
                     this.listData = this.listDataKeyword.slice(0,10)

src/styles/common.scss

@@ -182,7 +182,7 @@
             &:before{
                 content: '全选';
                 margin-right: 5px;
-                color: #fff;
+                color: #222326;
                 font-size: 14px;
                 opacity: 0;
             }
@@ -348,6 +348,9 @@
                 font-size: 14px;
                 border-radius: 4px;
                 border-color: #CACFDB;
+                &:last-child{
+                    border-color: transparent;
+                }
             }
         }
     }