fixed

src/layouts/footer/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 14:33:21
+ * @LastEditTime: 2021-11-04 14:00:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \questionnaired:\code\FE_huoran_data\src\layouts\footer\index.vue
+-->
 <template>
     <div>
         <div class="copyright">
@@ -22,13 +30,12 @@ export default {
 </script>
 <style lang="scss" scoped>
     .copyright{
-        padding: 20px 0;
+        padding: 18px 0;
-        color: rgba(0, 0, 0, 0.45);
         font-size: 12px;
         text-align: center;
-        background-color: #333;
+        background-color: #F3F6FA;
         a{
-            color:#fff;
+            color:#B1B4B8;
             font-size: 12px;
             &:hover{
                 opacity: .8;

src/layouts/header/index.vue

@@ -4,7 +4,7 @@
             <span v-if="token && isManager && !showSetting">{{schoolName}}</span>
         </a>
         <div class="inner">
-            <div style="height: 70px;"></div>
+            <div style="height: 64px;"></div>
             <navbar ref="nav"></navbar>
             <div class="action" v-if="token">
                 <img v-if="isManager && showSetting" class="icon" :class="{'m-r-20': !isCustomer}" src="../../assets/img/setting.png" alt="" @click="toManager">
@@ -218,13 +218,14 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+    $height: 64px;
     .header{
         z-index: 10;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
-        height: 70px;
+        height: $height;
         background-color: #fff;
         .inner{
             display: flex;
@@ -232,7 +233,7 @@ export default {
             align-items: center;
             max-width: $max-width;
             min-width: $min-width;
-            padding: 0 10px;
+            padding: 0 80px 0 10px;
             margin: 0 auto;
         }
         .logo{
@@ -241,7 +242,7 @@ export default {
             left: 30px;
             font-size: 28px;
             color: #568DF2;
-            line-height: 70px;
+            line-height: $height;
             cursor: pointer;
         }
         
@@ -255,7 +256,7 @@ export default {
             justify-content: space-between;
             align-items: center;
             width: 300px;
-            height: 70px;
+            height: $height;
             padding: 7px 20px;
             margin: 0 auto;
             background-color: #fff;
@@ -310,8 +311,8 @@ export default {
                 opacity: .9;
             }
             span{
-                margin-left: 10px;
+                margin-left: 5px;
-                color: #000;
+                color: #666;
                 font-size: 14px;
             }
         }

src/layouts/home/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-03 14:33:21
+ * @LastEditTime: 2021-11-04 20:23:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \questionnaired:\code\FE_huoran_data\src\layouts\home\index.vue
+-->
 <template>
     <div class="main">
         <v-head></v-head>
@@ -40,16 +48,21 @@ export default {
 <style lang="scss" scoped>
     .main{
         min-height: 100%;
-        background:  url(../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
         .layout{
-            margin-top: 70px;
+            margin-top: 64px;
         }
         .view{
-            max-width: $max-width;
+            // max-width: $max-width;
             min-width: $min-width;
-            min-height: calc(100vh - 56px);
+            min-height: calc(100vh - 52px);
-            padding: 20px;
             margin: 0 auto;
         }
+        .pd{
+            padding: 12px 80px 0;
+            background-color: #F3F6FA;
+            .shapes{
+                display: block;
+            }
+        }
     }
 </style>

src/layouts/navbar/index.vue

@@ -118,7 +118,7 @@ export default {
             padding: 0 15px;
             margin: 0 20px;
             font-size: 16px;
-            line-height: 66px;
+            line-height: 60px;
             color: #3F3F3F;
             cursor: pointer;
             border-bottom: 4px solid transparent;

src/pages/account/login/index.vue

@@ -1,7 +1,16 @@
 <template>
     <div class="wrap">
+        <div class="shapes">
+            <img class="shape1" src="@/assets/img/shapes/shape1.png" alt="">
+            <img class="shape2" src="@/assets/img/shapes/shape2.png" alt="">
+            <img class="shape3" src="@/assets/img/shapes/shape3.png" alt="">
+            <img class="shape4" src="@/assets/img/shapes/shape4.png" alt="">
+            <img class="shape5" src="@/assets/img/shapes/shape5.png" alt="">
+            <img class="shape6" src="@/assets/img/shapes/shape6.png" alt="">
+        </div>
         <div class="login">
             <div class="form">
+                <h6 class="title">欢迎使用请登录</h6>
                 <ul class="tab">
                     <li v-for="(item,index) in tabList" :key="index" :class="{active: form.distinguish == item.id}" @click="typeClick(item)">{{item.label}}</li>
                 </ul>
@@ -58,10 +67,10 @@ export default {
             tabList: [
                 {
                     id: '1',
-                    label: '账号登录'
+                    label: '账号'
                 },{
                     id: '2',
-                    label: '手机号/邮箱登录'
+                    label: '手机号/邮箱'
                 }
             ],
             verificationIMG: '',
@@ -197,74 +206,106 @@ export default {
 <style scoped lang="scss">
     .wrap {
         min-height: 100%;
-        background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+        background-color:  #F3F6FA;
         overflow: hidden;
-        
+        .shapes{
+            img{
+                position: absolute;
+            }
+        }
+        .shape1{
+            top: 123px;
+        }
+        .shape2{
+            top: 238px;
+            left: 35px;
+        }
+        .shape3{
+            top: 485px;
+        }
+        .shape4{
+            bottom: 285px;
+            right: 0;
+        }
+        .shape5{
+            bottom: 145px;
+            right: 0;
+        }
+        .shape6{
+            bottom: 0;
+            right: 0;
+        }
         .login{
-            width: 600px;
+            width: 436px;
-            margin: 200px auto;
+            margin: 188px auto 150px;
-            text-align: center;
-
             .form{
-                padding: 40px 40px 50px;
+                padding: 38px 38px 60px;
-                border-radius: 10px;
+                border-radius: 6px;
                 background-color: #fff;
+                .title{
+                    margin-bottom: 25px;
+                    font-size: 26px;
+                    color: #0B1D30;
+                    letter-spacing: 4px;
+                }
                 .tab{
                     display: flex;
-                    justify-content: center;
                     align-items: center;
-                    margin-bottom: 60px;
+                    margin-bottom: 24px;
-                    border-bottom: 2px solid #e0e0e0;
+                    border-bottom: 2px solid #E1E6F2;
                     li{
-                        padding: 9px 20px;
+                        padding: 18px 0;
                         margin-bottom: -1px;
+                        font-size: 18px;
                         color: #555;
                         cursor: pointer;
-                        border-bottom: 2px solid transparent;
+                        border-bottom: 4px solid transparent;
-                        &.active{
+                        &:first-child{
-                            border-bottom-color: $main-color;
+                            margin-right: 50px;
                         }
+                        &.active{
+                            color: #006EFF;;
+                            border-bottom-color: #006EFF;
                         }
                     }
-                .el-form{
-                    padding: 0 70px;
                 }
                 .label{
                     margin-bottom: 10px;
                     color: #105CB2;
                 }
+                /deep/.el-form-item{
+                    margin-bottom: 20px;
+                }
                 /deep/.el-input__inner{
                     position: relative;
-                    height: 46px;
+                    height: 52px;
-                    padding: 0 20px 0 40px;
+                    padding: 0 20px 0 34px;
-                    line-height: 46px;
+                    line-height: 50px;
-                    border: 0;
+                    background-color: #FBFBFB;
-                    border-bottom: 1px solid #e4e4e4;
+                    border: 1px solid #E1E6F2;
-                    border-radius: 0 !important;
+                    border-radius: 4px !important;
                 }
                 .account,.password,.code{
                     z-index: 1;
                     position: absolute;
-                    top: 11px;
+                    top: 17px;
-                    left: 8px;
+                    left: 11px;
-                    width: 24px;
+                    width: 18px;
-                    height: 28px;
+                    height: 18px;
-                    background: url(../../../assets/img/account.png) 0 0/100% 100% no-repeat;
+                    background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
                 }
                 .password{
-                    width: 22px;
+                    top: 18px;
-                    height: 24px;
+                    background-image: url(../../../assets/img/login/password.png);
-                    background-image: url(../../../assets/img/password.png);
                 }
                 .code{
-                    width: 22px;
+                    top: 18px;
-                    height: 24px;
+                    background-image: url(../../../assets/img/login/code.png);
-                    background-image: url(../../../assets/img/code.png);
                 }
                 .ver-img{
                     position: absolute;
-                    top: -10px;
+                    top: 1px;
-                    right: 0;
+                    right: 1px;
                 }
                 /deep/.el-form-item__error{
                     top: 105%;
@@ -280,7 +321,7 @@ export default {
                     padding: 0;
                     font-size: 20px;
                     background-color: $main-color;
-                    border-radius: 8px;
+                    border-radius: 4px;
                     border: 0;
                 }
             }

src/pages/data/list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="wrap">
+    <div class="wrap pd">
         <div class="left">
              <el-menu class="menu" ref="type" @open="selectType" @select="selectType" unique-opened :default-active="defaultType" :default-openeds="defaultOpenType">
                 <template v-for="item in typeList">
@@ -90,7 +90,6 @@
                 </template>
              </el-menu>
         </div>
-
         <div class="right">
             <div class="page">
                 <h6 class="p-title">数据介绍</h6>

src/pages/index/list/index.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="wrap" :class="{result: keyword}">
+        <div class="banner">
             <hr class="shadow" v-if="keyword">
             <div class="title" v-if="!keyword">准确，多元，海量数据</div>
             <div class="search-wrap">
                 <div class="search">
+                    <input ref="keyword" v-model="keyword" type="text" placeholder="请输入关键词">
+                    <img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="keyword = ''">
                     <div class="icon-wrap">
                         <img src="../../../assets/img/search-white.png" alt="">
+                        搜索
                     </div>
-                <input ref="keyword" v-model="keyword" type="text" placeholder="请输入关键词">
-                <img v-if="keyword" src="../../../assets/img/remove-gray.png" alt="" class="remove" @click="keyword = ''">
                 </div>
                 <div class="hot" v-if="hotData.length">
                     <span class="name">热门下载：</span>
@@ -17,10 +19,10 @@
                     </ul>
                 </div>
             </div>
-
+        </div>
-        <template v-if="keyword">
+        <div class="list-wrap" v-if="keyword">
             <div class="tips">
-                <p class="result">搜索结果</p>
+                <p class="result"><img src="@/assets/img/index/search.png" alt=""> 搜索结果</p>
                 <p class="num">搜索完成，共有{{total}}个结果匹配</p>
             </div>
             
@@ -42,9 +44,122 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <div class="pagination">
+            <div class="pagination" v-show="total">
                 <el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
             </div>
+            <div class="none" v-if="!total">
+                <img src="@/assets/img/index/index19.png" alt="">
+                <p class="text">暂无数据</p>
+            </div>
+        </div>
+        <template v-else>
+            <!-- 简介 -->
+            <ul class="intro">
+                <li>
+                    <img src="@/assets/img/index/index1.png" alt="">
+                    <div class="text">
+                        <h6>平台概览</h6>
+                        <p class="desc">了解数据平台一句话简介</p>
+                    </div>
+                </li>
+                <li>
+                    <img src="@/assets/img/index/index2.png" alt="">
+                    <div class="text">
+                        <h6>平台特色与优势</h6>
+                        <p class="desc">了解数据平台一句话简介</p>
+                    </div>
+                </li>
+                <li>
+                    <img src="@/assets/img/index/index1.png" alt="">
+                    <div class="text">
+                        <h6>平台概览</h6>
+                        <p class="desc">了解数据平台一句话简介</p>
+                    </div>
+                </li>
+            </ul>
+            <!-- 关于 -->
+            <div class="about">
+                <div class="inner">
+                    <h6 class="l-title">关于数据平台</h6>
+                    <div class="desc">欢迎使用数据平台，这是我们的财经数据库。我们的数据涵盖股票数据，期货数据，债券数据，期权数据，利率数据，公募数据和宏观数据，拥有超40年的历史数据，可为您解读、预测、分析，模拟市场趋势、经济周期和世界事件影响提供必要的数据支持。我们的数据均来源于各大专业财经权威网站和数据官方发布平台，并经过专业的数据分类和整理，可让用户轻松便捷地搜索并批量下载到自己研究所需的数据，极大地减轻自己搜索整理数据的时间，提高研究效率, 从而高效的输出研究成果。</div>
+                </div>
+            </div>
+            <!-- 特色与优势 -->
+            <div class="adv">
+                <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">
+                <div class="inner">
+                    <h6 class="l-title">特色与优势</h6>
+                    <ul class="list">
+                        <li>
+                            <img src="@/assets/img/index/index3.png" alt="">
+                            <h6>综合全面的财经数据库</h6>
+                            <p class="text">跨越多种主要资产类别，超40 年的历史数据和上千种宏观指标数据</p>
+                        </li>
+                        <li>
+                            <img src="@/assets/img/index/index4.png" alt="">
+                            <h6>权威、多样数据源</h6>
+                            <p class="text">原始数据来源权威、可靠，用户可依据自己所需进行数据再加工，以获得更准确的结果</p>
+                        </li>
+                        <li>
+                            <img src="@/assets/img/index/index5.png" alt="">
+                            <h6>实时更新无限下载</h6>
+                            <p class="text">数据库实时更新，会员用户可无限量下载平台各种数据表，随时获取最新数据</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!-- 产品展示 -->
+            <div class="product">
+                <div class="inner">
+                    <h6 class="l-title">产品展示</h6>
+                    <div class="pics">
+                        <div class="text">
+                            <img src="@/assets/img/index/index11.png" alt="" class="icon">
+                            <h6>自定义下载灵活便捷</h6>
+                            <p class="desc">可自选字段，时间区间，数据频率，轻松下载所需的数据。</p>
+                        </div>
+                        <img src="@/assets/img/index/index12.png" alt="" class="pro-pic">
+                    </div>
+                </div>
+            </div>
+            <div class="product bg-white">
+                <div class="inner">
+                    <div class="pics">
+                        <img src="@/assets/img/index/index14.png" alt="" class="pro-pic">
+                        <div class="text">
+                            <img src="@/assets/img/index/index13.png" alt="" class="icon">
+                            <h6>使用概况统计一目了然</h6>
+                            <p class="desc">管理员可随时登录后台查看各种数据统计，了解各类数据的下载情况以及前台用户在数据平台的使用情况。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="product">
+                <div class="inner">
+                    <div class="pics">
+                        <div class="text">
+                            <img src="@/assets/img/index/index15.png" alt="" class="icon">
+                            <h6>海量数据随意下载</h6>
+                            <p class="desc">购买后可享受数据免费更新，且不限账号，不限量，畅享全平台数据。</p>
+                        </div>
+                        <img src="@/assets/img/index/index16.png" alt="" class="pro-pic">
+                    </div>
+                </div>
+            </div>
+            <div class="product bg-white">
+                <div class="inner">
+                    <div class="pics">
+                        <img src="@/assets/img/index/index18.png" alt="" class="pro-pic">
+                        <div class="text">
+                            <img src="@/assets/img/index/index17.png" alt="" class="icon">
+                            <h6>模糊搜索高效定位所需数据</h6>
+                            <p class="desc">强大的搜索功能，用户只需输入品种代码、关键词等，系统就会自动搜索出最匹配的数据供用户查看、下载。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </template>
     </div>
 </template>
@@ -152,36 +267,50 @@ export default {
 <style lang="scss" scoped>
     .wrap{
         position: relative;
+        background-color: #F3F6FA;
+        .banner{
+            padding: 160px 0;
+            background:  url(../../../assets/img/login-bg.png) 0 0/100% 100% no-repeat;
+        }
         .title{
-            margin: 70px 0 90px;
+            margin-bottom: 37px;
-            font-size: 50px;
+            font-size: 45px;
             color: #fff;
             text-align: center;
         }
+        .list-wrap{
+            padding: 20px 40px;
+            background-color: #fff;
+        }
         .search-wrap{
-            width: 600px;
+            width: 700px;
             margin: 0 auto;
         }
         .search{
             display: flex;
             justify-content: space-between;
             align-items: center;
-            height: 46px;
+            height: 62px;
             margin: 0 auto;
-            border: 2px solid $main-color;
             background-color: #fff;
-            
+            border-radius: 4px;
+            overflow: hidden;
             .icon-wrap{
                 display: inline-flex;
                 align-items: center;
                 height: 100%;
                 padding: 0 30px;
+                font-size: 18px;
                 text-align: center;
-                background-color: $main-color;
+                color: #fff;
+                background-color: #006EFF;
+                img{
+                    margin-right: 5px;
+                }
             }
             input{
                 flex: 1;
-                padding-left: 20px;
+                padding-left: 15px;
                 font-size: 18px;
                 color: #333;
                 background-color: transparent;
@@ -195,7 +324,7 @@ export default {
                 }
             }
             .remove{
-                margin: 0 10px;
+                margin: 0 20px;
                 cursor: pointer;
             }
         }
@@ -213,15 +342,13 @@ export default {
                 margin-left: 20px;
                 li{
                     margin-right: 50px;
-                    color: #568df2;
+                    color: #fff;
-                    font-size: 16px;
+                    font-size: 14px;
                     cursor: pointer;
                 }
             }
         }
         &.result{
-            padding: 70px 90px 50px;
-            background-color: #fff;
             .shadow{
                 position: absolute;
                 top: 0;
@@ -231,11 +358,6 @@ export default {
                 border-bottom: 1px solid rgba(228,228,228,0.5);
                 box-shadow: 0 0 12px 2px rgba(228,228,228,0.8);
             }
-            .hot{
-                .name{
-                    color: #333;
-                }
-            }
             .tips{
                 margin-bottom: 50px;
                 .result{
@@ -243,11 +365,154 @@ export default {
                     font-size: 17px;
                     color: $main-color;
                 }
+                img{
+                    width: 22px;
+                    margin-right: 5px;
+                }
                 .num{
                     font-size: 14px;
                     color: #515151;
                 }
             }
         }
+        .l-title{
+            position: relative;
+            margin-bottom: 37px;
+            font-size: 30px;
+            text-align: center;
+            color: #0B1D30;
+            &:after{
+                content: '';
+                position: absolute;
+                bottom: -10px;
+                left: 50%;
+                width: 30px;
+                height: 4px;
+                transform: translate(-50%);
+                background-color: #006EFF;
+            }
+        }
+        .intro{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            padding: 43px 0;
+            background-color: #fff;
+            li{
+                display: inline-flex;
+                align-items: center;
+            }
+            img{
+                width: 50px;
+                margin-right: 15px;
+            }
+            h6{
+                margin-bottom: 5px;
+                font-size: 16px;
+                color: #0B1D30;
+            }
+            .desc{
+                font-size: 13px;
+                color: #757F92;
+            }
+        }
+        .inner{
+            width: 1200px;
+            padding: 67px 0;
+            margin: 0 auto;
+        }
+        .about{
+            .inner{
+                padding: 67px;
+            }
+            .desc{
+                min-height: 200px;
+                padding: 35px 280px 35px 55px;
+                font-size: 14px;
+                color: #0B1D30;
+                line-height: 30px;
+                background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat;
+            }
+        }
+        .adv{
+            position: relative;
+            background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat;
+            .shape{
+                position: absolute;
+            }
+            .shape1{
+                top: 25px;
+                right: 0;
+            }
+            .shape2{
+                bottom: 30px;
+                left: 50px;
+            }
+            .shape3{
+                bottom: 25px;
+                right: 50px;
+            }
+            .list{
+                display: flex;
+                flex: 1;
+                height: 370px;
+                li{
+                    padding: 107px 35px 0;
+                    margin-right: 20px;
+                    text-align: center;
+                    box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+                    border-radius: 10px;
+                    &:last-child{
+                        margin-right: 0;
+                    }
+                }
+                img{
+                    width: 64px;
+                }
+                h6{
+                    margin: 45px 0 16px;
+                    font-size: 18px;
+                    color: #0B1D30;
+                }
+                .text{
+                    font-size: 14px;
+                    color: #757F92;
+                }
+            }
+        }
+        .pics{
+            display: flex;
+            justify-content: space-between;
+            .icon{
+                width: 44px;
+            }
+            .text{
+                width: 340px;
+            }
+            h6{
+                margin: 30px 0 10px;
+                font-size: 28px;
+                color: #0B1D30;
+            }
+            .desc{
+                font-size: 15px;
+                color: #757F92;
+            }
+            .pro-pic{
+                width: 460px;
+            }
+        }
+        .none{
+            padding: 50px 0;
+            text-align: center;
+            img{
+                width: 324px;
+                margin-bottom: 42px;
+            }
+            .text{
+                font-size: 12px;
+                color: #333;
+            }
+        }
     }
 </style>

src/styles/common.scss

@@ -163,8 +163,6 @@
 
 .el-table{
     border-radius: 4px;
-    border: 1px solid rgba(0, 0, 0, 0.06);
-    border-bottom: 0;
     .cell{
         font-size: 14px;
         .el-checkbox{
@@ -178,7 +176,7 @@
         }
     }
     th{
-        background: $--color-primary !important;
+        background: #E8F0FF !important;
         .cell{
             color: #222326;
             font-size: 14px;

src/styles/default/index.scss

@@ -1,6 +1,6 @@
 /* 改变主题色变量 */
 
-$--color-primary: #E6F0FF;
+$--color-primary: #006EFF;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';