搜索页开发

src/assets/css/global.css

@@ -4,7 +4,7 @@ body,
 #app {
   width: 100%;
   height: 100%;
-  background-color: #f1f2f5;
+  background-color: #fff;
   margin: 0;
   padding: 0;
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

src/pages/homepage/components/cardWrap.vue

@@ -18,13 +18,12 @@
       <div style="height: 72px; text-align: center; background: #fff; padding-top: 10px;">
         <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
           <el-button slot="append" class="searchbtn" @click="jumpToSearchPage">
-<!--            <i class="el-icon-search"></i>-->
             <img src="../../../../static/homepage/u432.svg" alt="">
           </el-button>
-          <!-- <template slot="append">搜索</template> -->
         </el-input>
       </div>
     </div>
+    <div style="background: #f1f2f5; height: 10px; width: 100%;"></div>
     <div class="chart-wrap">
       <div class="chart-card">
         <div class="title">各主题域资产数量统计</div>
@@ -134,7 +133,7 @@ export default {
   }
 
   .input-wrapper {
-    width: 47%;
+    width: 36%;
     height: 53px;
 
     /deep/ .el-input__inner {
@@ -196,7 +195,7 @@ export default {
   }
 
   .chart-wrap {
-    margin-top: 10px;
+    //margin-top: 10px;
     padding: 20px;
     height: 700px;
     background: #fff;

src/pages/homepage/components/searchPage.vue

@@ -1,41 +1,188 @@
 // 详情页
 <template>
   <div class="detailPage">
-    <div class="left">
-      <!-- 左侧列表 -->
-      <article-detail></article-detail>
+    <div class="search-card">
+      <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
+        <el-button slot="append" class="searchbtn" @click="jumpToSearchPage">
+          <img src="../../../../static/homepage/u432.svg" alt="">
+        </el-button>
+      </el-input>
     </div>
+    <el-tabs class="bottom-card" v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane :key="item.id" v-for="item in tabList" :label="item.name" :name="item.id">
+        <div class="flex">
+          <div class="tree-wrap">
+            <div>{{item.name}}</div>
+            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+          </div>
+          <div class="list-wrap">
+            <div class="entity-card" v-for="(item, idx) in list" :key="idx">
+              <p class="title">实体名称{{item.logicTbName}}</p>
+              <el-row style="color: rgb(91,91,91);line-height: 40px;">
+                <el-col :span="12">
+                  英文名称：{{item.tbName}}
+                </el-col>
+                <el-col :span="12">
+                  更新时间：{{item.updateTime}}
+                </el-col>
+                <el-col :span="12">
+                  所属主题：{{item.topic}}
+                </el-col>
+              </el-row>
+            </div>
+            <el-pagination
+              style="float: right;margin-bottom: 10px;"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page.sync="currentPage"
+              :page-size="pageSize"
+              layout="total, prev, pager, next"
+              :total="total">
+            </el-pagination>
+            <div style="clear: both;"></div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import articleDetail from "./entityDetail.vue";
 export default {
-  components: {
-    articleDetail
-  },
   data() {
-    return {};
+    return {
+      activeName: 'first',
+      tabList: [
+        {
+          name: '主题库',
+          id: 'first',
+          num: 0
+        },
+        {
+          name: '专题库',
+          id: 'second',
+          num: 0},
+        {
+          name: '指标',
+          id: 'third',
+          num: 0},
+        {
+          name: '服务',
+          id: 'fourth',
+          num: 0}
+      ],
+      data: [{
+        label: '一级 1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        label: '一级 2',
+        children: [{
+          label: '二级 2-1',
+          children: [{
+            label: '三级 2-1-1'
+          }]
+        }, {
+          label: '二级 2-2',
+          children: [{
+            label: '三级 2-2-1'
+          }]
+        }]
+      }, {
+        label: '一级 3',
+        children: [{
+          label: '二级 3-1',
+          children: [{
+            label: '三级 3-1-1'
+          }]
+        }, {
+          label: '二级 3-2',
+          children: [{
+            label: '三级 3-2-1'
+          }]
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      list: [],
+      currentPage: 1,
+      pageSize: 5,
+      total: 1000
+    };
   },
   created() {},
   mounted() {
     document.documentElement.scrollTop = 0;
   },
-  methods: {}
+  methods: {
+    handleClick(tab, event) {
+      this.activeName = tab.name;
+    },
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .detailPage {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
-  .left {
-    width: calc(68% - 15px);
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  .search-card {
+    height: 100px;
+    text-align: center;
+    padding-top: 30px;
+    border-bottom: 1px solid #ddd;
+    .input-wrapper {
+      width: 36%;
+      height: 53px;
+
+      /deep/ .el-input__inner {
+        height: 53px;
+      }
+
+      /deep/ .el-input-group__append {
+        background-color: #fff;
+        color: #80c2f7;
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
   }
-  .right {
-    display: inline-block;
-    width: calc(32%);
+  .bottom-card {
+    padding: 0 10%;
+    .tree-wrap {
+      width: 25%;
+    }
+    .list-wrap {
+      width: 75%;
+      .entity-card {
+        width: 100%;
+        height: 100px;
+        border: 1px solid #ddd;
+        padding: 20px;
+        margin-bottom: 10px;
+        .title {
+          font-size: 18px;
+          line-height: 30px;
+        }
+      }
+    }
   }
 }
 </style>

src/pages/homepage/layouts/homeLayout.vue

@@ -70,10 +70,10 @@ export default {
 
 <style lang="scss" scoped>
 .home-wrapper {
-  position: absolute;
+  //position: absolute;
   // top: 60px;
   width: 100%;
-  height: 100%;
+  //height: 100%;
   background-size: cover;
   box-sizing: border-box;
 }