代码优化

src/components/business/teacher-details.vue

@@ -235,7 +235,7 @@ export default {
 
         sortFun(){
             this.dir = this.dir == 2 ? 1 : 2;
-            this.getCourse();
+            // this.getCourse();
         },
 
         //课程教学

src/components/business/teacher-list.2.vue

+<template>
+<section>
+    <GroupTitle groupTitle="讲师" :groupNum="groupNum" />
+    <div class="font-style">
+        <div class="teach-opt">
+            <div class="teach-list">
+                <div :class="index%2==1?'list-item mr0':'list-item'" 
+                    v-for="(item, index) in parmData" :key="index"
+                    @click="goToDetail(item)">
+                    <div class="tea-img" :style="'background:'+ item.bgColor">
+                        <img :src="item.doctorImg">
+                        <span class="learn-p">{{item.joinNum}}人已学</span>
+                        <!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
+                    </div>
+                    <div class="tea-txt">
+                        <div class="tea-name">{{item.doctorName}}</div>
+                        <div class="tea-position">
+                            {{item.doctorHospital}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+</template>
+
+<script>
+// import teacherTop from '../../components/teachers/teach-top-new';
+// import {
+//     teacher_back,
+//     fast_sicon,
+//     hot_teacher,
+//     screen,
+//     teacher,
+//     teacherother
+// } from '../../utils/buryingPoint';
+import GroupTitle from '@/components/business/group-title';
+export default {
+    components: {
+        GroupTitle
+    },
+    data() {
+        return {
+            topTitle: '讲师集',
+            isScroll: false,
+            token: '',
+            list: [],
+            isShowCount: true,
+            followCount: 0,
+            studyCount: 0,
+            col: 1, //0综合，1人气，2资源数，3姓名首字母
+            dir: 2, //1:正序 2：逆序
+        }
+    },
+    props: {
+        parmData: {
+            type: Array,
+            default: () => []
+        },
+        groupNum: {
+            type: String,
+            default: '0'
+        }
+    },
+    mounted() {
+        let _this = this
+        this.token = this.$route.query.userToken || this.$route.query.token
+        // this.getUserInfo()
+        // this.getData();
+        // window.__getUserInfo = function(parm){
+        //     // alert('in __getUserInfo')
+        //     _this.token = parm.userToken || _this.$route.query.token;
+        //     this.getData();
+        // }
+        window.__refresh = function (parm) {
+            _this.getData();
+        }
+        window.addEventListener('scroll', this.handleScroll)
+
+    },
+    computed: {
+        // groupNum() {
+        //     return this.parmData.length + ''
+        // }
+    },
+    methods: {
+        handleScroll: function () {
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+            if (scrollTop > 25) {
+                this.isScroll = true;
+            } else {
+                this.isScroll = false;
+            }
+        },
+        //获取版本号
+        getUserInfo() {
+            rocNative.getUserInfo({
+                __funcName: '__getUserInfo'
+            })
+        },
+        goToDetail(item) {
+            let _this = this;
+            this.$router.push({
+                path: '/details',
+                query: {
+                    id: item.doctorId,
+                    token: _this.token
+                }
+            })
+            // this.appBuryingPointEntrust({
+            //     ...teacher,
+            //     labelId: item.doctorId,
+            //     labelValue: item.doctorName
+            // })
+        },
+        // 埋点
+        appBuryingPointEntrust(val) {
+            rocNative.appBuryingPointEntrust(val)
+        },
+
+        //排序
+        sortFun() {
+            this.dir = this.dir == 1 ? 2 : 1;
+            this.getData()
+        },
+
+        randomBg(d) {
+            for (let i = 0; i < d.length; i++) {
+                if (i % 4 == 0) {
+                    d[i].bgColor = '#EBF6F1'
+                } else if (i % 4 == 1) {
+                    d[i].bgColor = '#EDF3FA'
+                } else if (i % 4 == 2) {
+                    d[i].bgColor = '#F0F0FA'
+                } else if (i % 4 == 3) {
+                    d[i].bgColor = '#F6EFE6'
+                }
+            }
+            /// console.log(d);
+        },
+
+        getData() {
+            let _this = this,
+                para = {
+                    token: _this.token,
+                    setEntry: 'headers'
+                }
+            let url = 'contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
+            this.GET(url, para).then(res => {
+                if (res.code == '000000') {
+                    _this.list = res.data.teacherList || [];
+                    _this.followCount = res.data.followCount || 0;
+                    _this.studyCount = res.data.studyCount || 0;
+                    if (_this.list.length > 0) {
+                        _this.randomBg(_this.list);
+                    }
+
+                }
+            })
+            // this.appBuryingPointEntrust({
+            //     ...teacher,
+            //     labelId: _this.dir,
+            //     labelValue: _this.dir === 1 ? '升序' : '降序'
+            // })
+        }
+
+    }
+}
+</script>
+
+<style>
+body {
+    background: #fff
+}
+</style>
+<style lang="scss" scoped>
+body {
+    background: #fff
+}
+
+@import '../../style/mixin';
+
+.mint-header {
+    background-color: rgba($color: #000000, $alpha: 0)
+}
+
+.font-style {
+    width: 100%;
+    overflow: hidden;
+    @include sc(0.6rem, #666);
+}
+
+.teach-opt {
+    padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
+
+    .teach-title {
+        font-size: px2rem(18px);
+        // padding-bottom: px2rem(0px);
+        color: #333;
+    }
+
+    .teach-list {
+        margin-top: px2rem(-14px);
+        overflow: hidden;
+    }
+
+    .opt-span {
+        span {
+            color: #449284;
+            font-size: px2rem(13px);
+            display: inline-block;
+            vertical-align: middle;
+            height: px2rem(10px);
+            line-height: px2rem(10px);
+
+            img {
+                display: inline-block;
+                width: px2rem(15px);
+                height: px2rem(15px);
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .list-item {
+        width: px2rem(170px);
+        margin-right: px2rem(5px);
+        margin-top: px2rem(15px);
+        border-radius: 0 0 px2rem(3px) px2rem(3px);
+        float: left;
+        box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
+    }
+
+    .mr0 {
+        margin-right: 0
+    }
+
+    .tea-txt {
+        padding: px2rem(5px) px2rem(7px);
+    }
+
+    .tea-img {
+        width: px2rem(170px);
+        height: px2rem(83px);
+        position: relative;
+        border-radius: px2rem(3px) px2rem(3px) 0 0;
+
+        img {
+            width: 100%;
+            height: 100%;
+            display: block;
+            border-radius: px2rem(3px) px2rem(3px) 0 0;
+        }
+
+        .learn-p {
+            padding-left: px2rem(5px);
+            position: absolute;
+            width: 100%;
+            left: 0;
+            bottom: 0;
+            background: #333;
+            background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
+            background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
+            background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
+            background: linear-gradient(to right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
+            color: #fff;
+            font-size: px2rem(11px);
+            height: px2rem(20px);
+            line-height: px2rem(20px);
+        }
+    }
+
+    .tea-name {
+        padding: 0;
+        color: #333;
+        font-size: px2rem(14px);
+        font-weight: 500;
+    }
+
+    .tea-position {
+        height: px2rem(30px);
+        font-size: px2rem(12px);
+        line-height: px2rem(15px);
+        color: #666;
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+    }
+}
+
+.home-header {
+    height: px2rem(185px);
+    @include bis('../../images/headerTop.png');
+
+    .logo_img {
+        height: px2rem(85px);
+        width: px2rem(345px);
+        text-align: center;
+    }
+}
+</style>

src/components/business/teacher-list.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script>
-// import teacherTop from '../../components/teachers/teach-top-new';
 // import {
 //     teacher_back,
 //     fast_sicon,
@@ -67,7 +66,7 @@ export default {
         let _this = this
         this.token = this.$route.query.userToken || this.$route.query.token
         // this.getUserInfo()
-        this.getData();
+        // this.getData();
         // window.__getUserInfo = function(parm){
         //     // alert('in __getUserInfo')
         //     _this.token = parm.userToken || _this.$route.query.token;
@@ -146,7 +145,7 @@ export default {
                     token: _this.token,
                     setEntry: 'headers'
                 }
-            let url = '/contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
+            let url = 'contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
             this.GET(url, para).then(res => {
                 if (res.code == '000000') {
                     _this.list = res.data.teacherList || [];

src/components/common/loading-new.vue

  <template>
-	<div class="up-maps-loading" v-show="lock">
-        <img src="../../images/loading-new.png">&nbsp;正在加载
+	<div class="loader loader--style3" title="2">
+        <div class="loader-mask"></div>
+        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+            <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+                <animateTransform attributeType="xml"
+                attributeName="transform"
+                type="rotate"
+                from="0 25 25"
+                to="360 25 25"
+                dur="0.6s"
+                repeatCount="indefinite"/>
+            </path>
+        </svg>
     </div>
-</template>
 
-<script>
-    export default {
-    	data(){
-            return{
-                positionY: 0,
-                timer: null,
-                lock:true
-            }
-        },
-        mounted(){
-        	// this.timer = setInterval(() => {
-        	// 	this.positionY ++;
-        	// }, 600)
-        },
-        // beforeDestroy(){
-        // 	clearInterval(this.timer);
-        // }
-    }
-</script>
+</template>
 
 <style lang="scss" scoped>
     @import '../../style/mixin';
-	.up-maps-loading{
-        margin: 10px 0;
+    .loader {
+        margin: 0 0 2em;
+        height: 100px;
+        width: 20%;
         text-align: center;
-        line-height: 20px;
-    }
-    .up-maps-loading>img{
+        padding: 1em;
+        margin: 0 auto 1em;
         display: inline-block;
-        margin: 0 auto;
-        width: 20px;
-        height: auto;
-        animation: circle 1s infinite linear;
-        -webkit-animation: circle 1s infinite linear;
+        vertical-align: top;
+        &-mask {
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            z-index: 100;
+            background: rgba(205,205,205, 0.8);
+        }
+        svg {
+            position: absolute;
+            top: px2rem(280px);
+            left: px2rem(166px);
+            z-index: 101;
+        }
     }
 
+    svg path, svg rect{
+        fill: #449284;
+    }
 </style>

src/components/common/loading.vue

@@ -48,7 +48,8 @@
     }
     .load_img{
     	@include wh(100%, 100%);
-    	background: url(../../images/icon_loading.png) no-repeat 0 0;
+    	// background: url(../../images/icon_loading.png) no-repeat 0 0;
+    	background: url(../../images/loading-new.png) no-repeat 0 0;
     	background-size: 2.5rem auto;
     	transform: translateY(0px);
     	animation: load .6s infinite ease-in-out;

src/views/result.vue

 <template>
   <section>
-        <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
-        <!-- <form @submit="search">
-          <input type="search" v-model="searchText">
-          <button v-show="false" type="submit" />
-        </form> -->
-        <!-- <mt-search v-model="searchText" ></mt-search> -->
     <form @submit.prevent="search">
       <mt-search v-model="searchText" ></mt-search>
       <button v-show="false" type="submit" />
     </form>
-
-        <!-- <SplitLine/> -->
     <!-- 没有结果页面 -->
-        <section v-show="!(showTab1 || showTab2 || showTab3 || showTab4)" class="mt-80">
+    <article v-show="!(showTab1 || showTab2 || showTab3 || showTab4)" class="mt-80">
       <section></section>
       <NoResultPage/>
       <SplitLine borderWidth="3px"/>
       <CourseAdjust/>
-        </section>
-        <!-- 有结果页面 -->
-        <section v-show="showTab1 || showTab2 || showTab3 || showTab4" class="mt-100">
-          <mt-navbar v-model="selected" :fixed="true" style="top: 66px;">
-            <mt-tab-item v-show="showTab0" id="0">综合</mt-tab-item>
-            <mt-tab-item v-show="showTab1" id="1">课程</mt-tab-item>
-            <mt-tab-item v-show="showTab2" id="2">五分钟医学</mt-tab-item>
-            <mt-tab-item v-show="showTab3" id="3">讲师</mt-tab-item>
-            <mt-tab-item v-show="showTab4" id="4">健康漫画</mt-tab-item>
-          </mt-navbar>
+    </article>
 
-          <!-- tab-container -->
-          <mt-tab-container v-model="selected">
-            <mt-tab-container-item v-show="showTab0" id="0">
+    <!-- 有结果页面 -->
+    <article v-show="showTab1 || showTab2 || showTab3 || showTab4">
+      <div class="navbar-container" >
+        <div class="navbar-container-item" v-show="showTab0" :class="{'bt-2': navIndex === '0'}" @click="navIndex = '0'">综合</div>
+        <div class="navbar-container-item" v-show="showTab1" :class="{'bt-2': navIndex === '1'}" @click="navIndex = '1'">课程</div>
+        <div class="navbar-container-item" v-show="showTab2" :class="{'bt-2': navIndex === '2'}" @click="navIndex = '2'">五分钟医学院</div>
+        <div class="navbar-container-item" v-show="showTab3" :class="{'bt-2': navIndex === '3'}" @click="navIndex = '3'">讲师</div>
+        <div class="navbar-container-item" v-show="showTab4" :class="{'bt-2': navIndex === '4'}" @click="navIndex = '4'">健康漫画</div>
+      </div>
+      <div class="list-container" v-show="navIndex === '0' && showTab0">
         <!-- 课程 -->
         <div v-show="showTab1">
           <CourseList :parmData="contentAppModels" :groupNum="contentAppModelCount"/>
@@ -56,30 +46,29 @@
           <ShowAllItem @showAllItem="showAllItem" itemIndex="4" />
         </div>
         <NoMoreItem/>
-            </mt-tab-container-item>
-            <mt-tab-container-item v-show="showTab1" id="1">
+      </div>
+      <div class="list-container" v-show="navIndex === '1' && showTab1">
         <CourseList :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/>
         <NoMoreItem/>
-            </mt-tab-container-item>
-            <mt-tab-container-item v-show="showTab2" id="2">
+      </div>
+      <div class="list-container" v-show="navIndex === '2' && showTab2">
         <FiveMinutes :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/>
         <NoMoreItem/>
-            </mt-tab-container-item>
-            <mt-tab-container-item v-show="showTab3" id="3">
+      </div>
+      <div class="list-container" v-show="navIndex === '3' && showTab3">
         <TeacherList :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/>
         <NoMoreItem/>
-            </mt-tab-container-item>
-            <mt-tab-container-item v-show="showTab4" id="4">
+      </div>
+      <div class="list-container" v-show="navIndex === '4' && showTab4">
         <HealthComics :parmData="educationContentsAll" :groupNum="educationContentCount"/>
         <NoMoreItem/>
-            </mt-tab-container-item>
-          </mt-tab-container>
-        </section>
+      </div>
+    </article>
   </section>
 </template>
 
 <script>
-import SearchHeader from '../components/business/search-header';
+// import SearchHeader from '../components/business/search-header';
 import SplitLine from '../components/business/split-line';
 import NoMoreItem from '../components/business/no-more-item';
 import ShowAllItem from '../components/business/show-all-item';
@@ -92,13 +81,14 @@ import HealthComics from '@/components/business/health-comics';
 import CourseAdjust from '../components/business/course-adjust';
 import NoResultPage from '@/components/business/no-result-page'
 import { Navbar, TabItem } from 'mint-ui';
-
+import Loading from '@/components/common/loading-new'
 export default {
   data() {
     return {
+      navIndex: '0',
       hasResult: true,
       searchText: '',
-      selected: '0',
+      // selected: '0',
       contentAppModelCount: '0',
       contentAppModels: [],
       contentAppModelsAll: [],
@@ -119,7 +109,7 @@ export default {
     }
   },
   components: {
-    SearchHeader,
+    // SearchHeader,
     SplitLine,
     Navbar,
     TabItem,
@@ -131,26 +121,27 @@ export default {
     FiveMinutes,
     TeacherList,
     HealthComics,
-    NoResultPage
+    NoResultPage,
+    Loading
   },
   watch: {
-    selected(val) {
-      this.showIndex(val)
-      // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
-    }
+    // selected(val) {
+    //   this.showIndex(val)
+    //   // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
+    // }
   },
   created(){
     this.searchText = this.$route.query.searchText || ''
     console.log(this.searchText)
   },
   mounted(){
-    this.search(this.searchText)
+    // this.search(this.searchText)
     // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
   },
   methods: {
     showAllItem(index) {
-      console.log(index)
-      this.selected = index
+      console.log(typeof index)
+      this.navIndex = index
     },
     // 搜索结果
     search(searchText) {
@@ -173,7 +164,7 @@ export default {
       this.showTab4 = true
       this.GET(url, para).then(res => {
           _this.searchText = ''
-          _this.selected = '0'
+          _this.navIndex = '0'
           if (res.code == '000000') {
             console.log(res)
             // 课程
@@ -286,38 +277,39 @@ export default {
     background: #F5F6F6;
   }
 </style>
-<style lang="scss">
+
+<style lang="scss" scoped>
   @import '../style/mixin.scss';
-  .mint-tab-item-label {
-      color: inherit;
+  .navbar-container {
+    display: flex;
+    position: fixed;
+    top: px2rem(60px);
+    left: 0;
+    z-index: 2;
+    flex-direction: row;
+    border-bottom: 1px solid #E7E7E7;
+    background: #fff;
+    padding-top: 10px;
+    margin-bottom: 6px;
+    &-item {
+      display: inline-flex;
+      margin: px2rem(15px) px2rem(15px) px2rem(-1px);
+      padding-bottom: px2rem(11px);
       font-size: px2rem(14px);
-      line-height: 1;
+      color: #449284;
     }
-  .mint-navbar {
-    background-color: #fff;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    text-align: center;
-    border-bottom: px2rem(1px) solid #f0f0f0 !important;
+    .bt-2 {
+      border-bottom: px2rem(3px) solid #449284;
     }
-  .mint-navbar .mint-tab-item.is-selected {
-    border-bottom: px2rem(2px) solid #449284;
-    color: #449284;
-    margin-bottom: px2rem(-1px);
   }
-  .mint-navbar .mint-tab-item {
-    padding: px2rem(19px) 0 px2rem(11px);
-    font-size: px2rem(14px);
+  .list-container {
+    margin: 0;
+    padding-top: px2rem(120px);
   }
-</style>
-<style lang="scss" scoped>
-@import '../style/mixin.scss';
-@import '../style/global.scss';
-.mt-80 {
-  margin-top: px2rem(80px);
-}
-.mt-100 {
+  .mt-80 {
+    padding-top: px2rem(80px);
+  }
+  .mt-100 {
     margin-top: px2rem(112px);
-}
+  }
 </style>

src/views/search-index.1.vue

+<template>
+    <div>
+        <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
+        <form @submit.prevent="search">
+          <mt-search v-model="searchText" ></mt-search>
+          <button v-show="false" type="submit" />
+        </form>
+
+        <!-- <SplitLine /> -->
+        <div class="mt-100"></div>
+        <HistoryLabels/>
+        <HotLabels/>
+    </div>
+</template>
+
+<script>
+import SearchHeader from '../components/business/search-header';
+import SplitLine from '../components/business/split-line';
+import HistoryLabels from '../components/business/history-labels';
+import HotLabels from '../components/business/hot-labels';
+// import { Search } from 'mint-ui';
+
+export default {
+  data() {
+    return {
+      searchText: ''
+    }
+  },
+  components: {
+    SearchHeader,
+    SplitLine,
+    HistoryLabels,
+    HotLabels
+  },
+  created(){
+    
+  },
+
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    // 跳转到结果页面，并
+    search() {
+      if(!this.searchText) return;
+      this.$router.push({
+        path: '/result',
+        query: {
+          searchText: this.searchText
+        }
+      })
+    },
+    // 获取历史搜索
+    getData() {
+      let _this = this,
+          para = {
+              type: 1,
+              token: _this.token,
+              setEntry: 'headers'
+          }
+      let url = '/contents/searchKeyword/listKeywords'
+      this.GET(url, para).then(res => {
+          if (res.code == '000000') {
+            if (res.data && res.data.length) {
+              let index = Math.floor(Math.random() * res.data.length)
+              this.searchText = res.data[index].keyword
+            }
+          }
+      })
+    }
+  },
+}
+</script>
+<style >
+  .mint-search {
+    position: fixed;
+    top: 0px;
+    z-index: 2;
+    height: 66px;
+    width: 100%;
+    border-bottom: 1px solid #E7E7E7 !important;
+  }
+ .mint-searchbar {
+    position: relative;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    background: #fff;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 30px 10px 8px;
+    z-index: 1;
+  }
+  .mint-searchbar-cancel {
+    margin-left: 10px;
+    font-size: 14px ;
+    color: #999;
+    text-decoration: none;
+  }
+  .mint-searchbar-inner {
+    background: #F5F6F6;
+  }
+  .mint-searchbar-core {
+    background: #F5F6F6;
+  }
+</style>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '../style/mixin.scss';
+@import '../style/global.scss';
+.mt-100 {
+  padding-top: px2rem(63px) !important;
+}
+</style>

src/views/search-index.2.vue

+<template>
+    <div>
+        <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
+        <form @submit.prevent="search">
+          <mt-search v-model="searchText" ></mt-search>
+          <button v-show="false" type="submit" />
+        </form>
+
+        <!-- <SplitLine /> -->
+        <div class="mt-100"></div>
+        <HistoryLabels/>
+        <HotLabels/>
+    </div>
+</template>
+
+<script>
+import SearchHeader from '../components/business/search-header';
+import SplitLine from '../components/business/split-line';
+import HistoryLabels from '../components/business/history-labels';
+import HotLabels from '../components/business/hot-labels';
+// import { Search } from 'mint-ui';
+
+export default {
+  data() {
+    return {
+      searchText: ''
+    }
+  },
+  components: {
+    SearchHeader,
+    SplitLine,
+    HistoryLabels,
+    HotLabels
+  },
+  created(){
+    
+  },
+
+  mounted(){
+    this.getData()
+  },
+  methods: {
+    // 跳转到结果页面，并
+    search() {
+      if(!this.searchText) return;
+      this.$router.push({
+        path: '/result',
+        query: {
+          searchText: this.searchText
+        }
+      })
+    },
+    // 获取历史搜索
+    getData() {
+      let _this = this,
+          para = {
+              type: 1,
+              token: _this.token,
+              setEntry: 'headers'
+          }
+      let url = '/contents/searchKeyword/listKeywords'
+      this.GET(url, para).then(res => {
+          if (res.code == '000000') {
+            if (res.data && res.data.length) {
+              let index = Math.floor(Math.random() * res.data.length)
+              this.searchText = res.data[index].keyword
+            }
+          }
+      })
+    }
+  },
+}
+</script>
+<style >
+  .mint-search {
+    position: fixed;
+    top: 0px;
+    z-index: 2;
+    height: 66px;
+    width: 100%;
+    border-bottom: 1px solid #E7E7E7 !important;
+  }
+ .mint-searchbar {
+    position: relative;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    background: #fff;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 30px 10px 8px;
+    z-index: 1;
+  }
+  .mint-searchbar-cancel {
+    margin-left: 10px;
+    font-size: 14px ;
+    color: #999;
+    text-decoration: none;
+  }
+  .mint-searchbar-inner {
+    background: #F5F6F6;
+  }
+  .mint-searchbar-core {
+    background: #F5F6F6;
+  }
+</style>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '../style/mixin.scss';
+@import '../style/global.scss';
+.mt-100 {
+  padding-top: px2rem(63px) !important;
+}
+</style>