001

src/views/content/components/list.vue

@@ -1,6 +1,20 @@
 <template>
   <div class="list">
     <!--{{value}}-->
+    <div class="query">
+      <el-row>
+        <el-col :xs="14" :sm="14" :md="14" :lg="20" :xl="20">
+          <!--<div style="width: 95%;">-->
+          <div>
+            <!--<input class="query_input" v-model="query"/>-->
+            <el-input class="query_input" v-model="query" size="small" placeholder="请输入内容"></el-input>
+          </div>
+        </el-col>
+        <el-col :xs="10" :sm="10" :md="10" :lg="4" :xl="4" style="float: right">
+          <el-button class="query_button" type="primary" size="small" icon="el-icon-search" @click="handleCurrentChange(-1)">搜索</el-button>
+        </el-col>
+      </el-row>
+    </div>
     <div>
       <el-row>
         <!--正文内容-->
@@ -43,7 +57,7 @@
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page.sync="value.pageNum"
-            :page-size="value.data.length"
+            :page-size="4"
             layout="prev, pager, next, jumper"
             :total="value.total">
           </el-pagination>
@@ -74,27 +88,42 @@ export default {
   data() {
     return {
       width: document.documentElement.clientWidth,
-      small:document.documentElement.clientWidth<=992
+      small:document.documentElement.clientWidth<=992,
+      query:'',
     }
   },
   methods: {
     getContext(context){
-      if (this.width <=992){
-        this.$router.push("/mobile/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
+      let type = this.$route.query && this.$route.query.type
+      let router = ''
+      if (type!=null){
+        router = "?id="+context.id+'&type='+type
       }else {
-        this.$router.push("/pc/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
+        router="/" +this.value.navId+"?id="+context.id
+      }
+      if (this.width <=992){
+        this.$router.push("/mobile/" + this.value.secondId +router);
+      }else {
+        this.$router.push("/pc/" + this.value.secondId +router);
       }
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
-      this.value.pageNum = val
+      if (val != -1){
+        this.value.pageNum = val
+      }
       let data = {
+        title:this.query,
         id: this.value.navId,
         pageNum: val,
         pageSize: 4
       }
+      this.type = this.$route.query && this.$route.query.type
+      if (this.type != null&&this.type!=0){
+        data.id = this.value.secondId
+      }
       getNode(data).then(res => {
         this.value.data = res.rows
         this.value.total = res.total
@@ -111,9 +140,31 @@ export default {
   }
 }
 </script>
+<style>
+.el-input__inner{
+
+  border-color: #1956BC !important;
+  border-radius: 0 !important;
+  /*line-height: 3.5rem !important;*/
+  /*height: 3.5rem !important;*/
+}
+</style>
 
 <style scoped lang="scss">
 
+.query_input{
+  border-color: #1956BC !important;
+  border-radius: 0 !important;
+
+}
+
+.query_button{
+  //height: 3.5rem;
+  border-radius: 0rem 1rem 1rem 0rem;
+  background-color: #1956BC;
+  border-color: #1956BC !important;
+}
+
 .context {
   margin: 3rem 2rem;
   padding-bottom: 3rem;
@@ -165,10 +216,13 @@ export default {
       text-overflow: ellipsis; //溢出用省略号显示
       white-space: nowrap; //溢出不换行
       font-size: 2rem;
-      font-weight: 600;
+      font-weight: bold;
       padding-right: 2rem;
 
     }
+    //.tw_context_title:hover{
+    //  font-weight: bolder;
+    //}
 
     .tw_context_text {
       margin-top: .8rem;
@@ -205,4 +259,22 @@ export default {
     float: none;
   }
 }
+.query{
+  //margin: 1rem 0;
+  z-index: 999;
+  width: 30%;
+  position: absolute;
+  right: 0;
+  //float: right;
+}
+@media screen and  (min-width: 1100px) and (max-width: 1400px) {
+  .query {
+    width: 40% !important;
+  }
+}
+@media screen and  (max-width: 1100px){
+  .query {
+    width: 80% !important;
+  }
+}
 </style>