学习项目页面部分搭建

pages/learnProj/learnProj.vue

@@ -1,22 +1,117 @@
 <template>
-	<view>
-		
-	</view>
+	<view class="page">
+    <view class="status-secs">
+      <view
+        v-for="(item, index) in statusList"
+        :key="item.id"
+        :class="[ { active: statusCount === item.id } ]"
+        @click="chooseStatus(item.id)"
+      >
+        {{ item.text }}
+      </view>
+    </view>
+    <uni-easyinput prefixIcon="search" v-model="searchIpt" placeholder="请输入项目名称" @iconClick="toggleSearch"></uni-easyinput>
+    <view class="drops">
+      <u-dropdown ref="uDrop">
+        <u-dropdown-item v-model="learnType" title="学习类型" :options="learnTypeRange"></u-dropdown-item>
+        <u-dropdown-item v-model="outDateStatus" title="逾期状态" :options="outDateStatusRange"></u-dropdown-item>
+        <u-dropdown-item v-model="qualStatus" title="合格状态" :options="qualStatusRange"></u-dropdown-item>
+        <u-dropdown-item v-model="signupStatus" title="报名状态" :options="signupStatusRange"></u-dropdown-item>
+      </u-dropdown>
+    </view>
+  </view>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-				
+        statusCount: 0,
+				statusList: [
+          { text: '全部', id: 0 },
+          { text: '已完成', id: 1 },
+          { text: '未完成', id: 2 },
+        ],
+        searchIpt: '',
+        // 四状态
+        learnType: 1,
+        outDateStatus: 1,
+        qualStatus: 1,
+        signupStatus: 1,
+        // 状态选项
+        learnTypeRange: [
+          { label: '不学', value: 1 },
+          { label: '要学', value: 2 },
+        ],
+        outDateStatusRange: [
+          { label: '临期', value: 1 },
+          { label: '过期', value: 2 },
+        ],
+        qualStatusRange: [
+          { label: '合格', value: 1 },
+          { label: '不及格', value: 2 },
+        ],
+        signupStatusRange: [
+          { label: '报了', value: 1 },
+          { label: '没报', value: 2 },
+        ],
 			}
 		},
 		methods: {
-			
+      chooseStatus(count) {
+        this.statusCount = count
+      },
+      toggleSearch() {
+        console.log(this.searchIpt)
+      }
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
+
+  .page{
+
+    width: 100vw;
+    height: 100vh;
+    background-color: #F8F8F8;
+    box-sizing: border-box;
+    padding: 0 20px;
+
+    .status-secs{
+
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-bottom: 1vh;
+
+      view{
+
+        box-sizing: border-box;
+        padding: 0 15rpx;
+        font-size: 18px;
+        color: #9EA2AC;
+        font-weight: bold;
+
+      }
+
+      .active{
+
+        font-size: 28px;
+        color: #000;
+
+      }
+
+    }
+
+    .drops{
+
+      width: 100%;
+      margin-top: 1vh;
+      display: flex;
+
+    }
+
+  }
 
 </style>