genggai

src/view/task/index.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import { reactive, ref ,provide} from 'vue';
 import FooterTabbar from '@/components/FooterTabbar.vue'
 import TaskList from '@/components/list/TaskList.vue'
-import { reactive } from 'vue'
+import Banner from "./components/Banner.vue";
+import CitySwitch from "./components/CitySwitch.vue";
+import { taskStore } from "../../store/task";
+import PositionType from './components/PositionType.vue'
+const store=taskStore()
 const taskList=reactive([
     {
        id:1
@@ -9,15 +14,149 @@ const taskList=reactive([
     {
        id:2
     },
-    ])
+])
+const state=reactive({
+  citySwitchBool:false,
+  PositionTypeBool:true
+})
+const closeCitySwitch=(name:string)=>{
+  if(name){
+    store.setCityValue(name)
+  }
+  state.citySwitchBool=false
+}
+const closePositionType=(name:sring)=>{
+  state.PositionTypeBool=false
+}
+provide('popup',{
+        closeCitySwitch,
+        closePositionType
+      }
+  )
+
+
+
 </script>
 
 <template>
-    <div>
+    <div class="task-page">
+        <div class="task-top">
+             <div class="task-top-city" @click="state.citySwitchBool=true">
+                 <i></i>
+                 <strong>{{ store.cityValue }}</strong>
+                 <span></span>
+             </div>
+             <input type="text" readonly placeholder="请输入想输入的内容"/>
+             <router-link to="/message/systemList" class="task-icon-message"></router-link>
+        </div>
+        <!-- <Banner></Banner> -->
+        <div class="task-title">
+              <h3>最新的任务</h3>
+              <div class="task-position-pop">职位类型 <span></span></div>
+              <div class="task-screen-pop">筛选<span></span></div>
+        </div>
+        <Banner></Banner>
         <TaskList :taskList="taskList"></TaskList>
-        <FooterTabbar></FooterTabbar>
+        <van-popup
+            v-model:show="state.citySwitchBool"
+            position="left"
+            duration="0"
+            :style="{ width: '100%', height: '100%' }"
+          >
+          <CitySwitch></CitySwitch>
+        </van-popup>
+        <van-popup
+            v-model:show="state.PositionTypeBool"
+            position="left"
+            duration="0"
+            :style="{ width: '100%', height: '100%' }"
+          >
+          <PositionType></PositionType>
+        </van-popup>
     </div>
+        
+        <FooterTabbar></FooterTabbar>
+    
 </template>
 <style  scoped>
-    
+.task-page{
+    background: #f9f9f9;
+    padding: 0 0.59rem 3rem;
+    min-height: calc(100vh - 3rem);
+  }
+  .task-top{
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0 0.91rem;
+  }
+  .task-top-city{
+    display: flex;
+    align-items: center;
+  }
+  .task-top-city i{
+    width: 1.04rem;
+    height: 1.01rem;
+    background: url('@/assets/img/icon/icon-place.png') no-repeat;
+    background-size: 100%;
+  }
+  .task-top-city strong{
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #333333;
+    margin-left: 0.1rem;
+  }
+  .task-top-city span{
+    margin: 0 0.6rem 0 0.2rem;
+    display: inline-block;
+    border-left: 0.18rem solid transparent;
+    border-right: 0.18rem solid transparent;
+    border-top: 0.36rem solid #333333;
+  }
+  .task-top input{
+    flex: 1;
+    height: 1.71rem;
+    background: #ffffff url('@/assets/img/icon/icon-search.png') 0.35rem 0.3rem no-repeat;
+    background-size: 9%; 
+    border: 0.03px solid #EDEDED;
+    border-radius: 0.85rem;
+    font-size: 0.69rem;
+    font-weight: 300;
+    color: #999999;
+    padding-left: 1.7rem;
+  }
+  .task-icon-message{
+    width: 1.31rem;
+    height: 1.28rem;
+    background: url('@/assets/img/icon/icon-remind.png') no-repeat;
+    background-size: 100%;
+    margin-left: 0.27rem;
+  }
+  .task-title{
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.67rem;
+    margin-top: 1.44rem;
+  }
+  .task-title h3{
+    flex: 1;
+    font-size: 0.96rem;
+    line-height: 0.96rem;
+    font-weight: bold;
+    color: #333333;
+  }
+  .task-positon-pop,.task-screen-pop{
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    font-weight: 300;
+    color: #666666;
+    margin-left: 0.56rem;
+  }
+  .task-positon-pop span,.task-screen-pop span{
+    display: inline-block;
+    border-left: 0.18rem solid transparent;
+    border-right: 0.18rem solid transparent;
+    border-top: 0.36rem solid #333333;
+    margin-left: 0.25rem;
+  }
+  
 </style>