手机端页面

src/pages/personal/pages/my-questions/index.vue

@@ -1,6 +1,28 @@
 <!--我的问答-->
 <template>
 <div id="my-questions">
+   <div class="search-area">
+     <el-form :inline="true" :model="questionSerach" >
+       <el-form-item class="el-form-item search-item" label="标准号">
+         <el-input v-model="questionSerach.standNumber" placeholder="根据标准号查询"></el-input>
+       </el-form-item>
+       <el-form-item class="el-form-item search-item" label="标准名称">
+         <el-input v-model="questionSerach.standName" placeholder="根据标准名称查询"></el-input>
+       </el-form-item>
+       <el-form-item class="el-form-item search-item" label="关键词">
+         <el-input v-model="questionSerach.keyCode" placeholder="根据关键词查询"></el-input>
+       </el-form-item>
+       <el-form-item>
+         <el-button size="mini"  @click="">查询</el-button>
+       </el-form-item>
+       <el-form-item>
+         <el-button size="mini"  @click="">清空</el-button>
+       </el-form-item>
+       <el-form-item>
+         <el-button size="mini" type="primary" @click="">提问</el-button>
+       </el-form-item>
+     </el-form>
+   </div>
   <el-tabs
     type="border-card"
     style="height: 100%"
@@ -13,16 +35,29 @@
          class="question-tabs"
          type="border-card"
          style="height: 100%"
-         tab-position="left"
-       >
-         <template v-for="question in questionList">
-           <el-tab-pane :name="question.name">
-             <template slot="label">
-               <questonsItem :question="question"></questonsItem>
-             </template>
-           </el-tab-pane>
-
-         </template>
+         tab-position="left">
+         <el-tab-pane label="国内标准">
+                  <el-tabs
+                    class="question-tabs"
+                    type="border-card"
+                    style="height: 100%"
+                    tab-position="left"
+                  >
+                    <template v-for="question in questionList">
+                      <el-tab-pane class="com-box" :name="question.name">
+                        <template slot="label">
+                          <questonsItem :question="question"></questonsItem>
+                        </template>
+                      </el-tab-pane>
+                    </template>
+                  </el-tabs>
+         </el-tab-pane>
+         <el-tab-pane label="海外标准">
+         </el-tab-pane>
+         <el-tab-pane label="企业标准">
+         </el-tab-pane>
+         <el-tab-pane label="公共问题">
+         </el-tab-pane>
        </el-tabs>
      </div>
     </el-tab-pane>
@@ -31,6 +66,10 @@
 
       </div>
     </el-tab-pane>
+    <el-tab-pane label="我的订阅">
+      <div>
+      </div>
+    </el-tab-pane>
   </el-tabs>
 </div>
 </template>
@@ -44,6 +83,11 @@ export default {
   },
   data(){
     return{
+      questionSerach:{
+        standNumber: '',
+        standName: '',
+        keyCode: '',
+      },
       questionList: [{
         title: '问题1',
         name: '1',
@@ -69,15 +113,33 @@ export default {
   height: 100%;
   background: #F5F7FA;
   margin-bottom: 10px;
-  .type-tabs{
+  .type-tabs {
     /deep/.el-tabs__header {
       margin-right: 0;
     }
+    /deep/.el-tabs__content {
+      padding: 0;
+      .el-tab-pane {
+        height: 100%;
+      }
+    }
   }
-  .question-tabs{
+  .question-tabs {
     height: 100%;
-    /deep/.el-tabs__item{
-      height: 100%;
+    border-top: none;
+    border-bottom: none;
+    /deep/.el-tabs__nav {
+      height: calc(~'100% - 50px');
+      overflow: auto;
+    }
+    /deep/ &.el-tabs--border-card .el-tabs__item {
+      height: 65px;
+      border-color: #d1dbe5 transparent;
+      text-align: left;
+      border-top-color: transparent;
+      &.is-active {
+        border-top-color: #d1dbe5;
+      }
     }
   }
   /deep/.el-tabs__content{
@@ -87,5 +149,10 @@ export default {
   /deep/.el-tab-pane{
     height: 100%;
   }
+  .com-box{
+    /deep/.el-tabs__item .is-left{
+      height: auto;
+    }
+  }
 }
 </style>