提交

src/assets/css/style.css

@@ -0,0 +1,170 @@
+body,div,h3,h4,h5,input,textarea,select,p,dl,dt,dd,a,i,strong,img,button,form,table,th,tr,td,tbody{
+    margin:0;
+    padding:0;
+  }
+  input{
+    resize: none;
+    border: none;
+  }
+  img{
+    border: none;
+  }
+  a{
+    text-decoration: none;
+    color: #fe9527;
+  }
+  body {
+    color: #333333;
+    min-height: 100vh;
+    background: #ffffff;
+    font-size: 0.64rem;
+    font-family: 'Microsoft YaHei';
+  }
+  textarea{
+    line-height: 1.2rem !important;
+  }
+  .van-nav-bar .van-icon{
+    color: #333333;
+  }
+  .van-button--primary{
+    background: linear-gradient(90deg, #FEA829, #FE8F27);
+    border-radius: 1.17rem;
+    border: none;
+    font-size: 0.96rem;
+  }
+  .van-checkbox__icon{
+    height: 0.75rem;
+    font-size: 0.8rem;
+  }
+  .van-checkbox__icon .van-icon{
+    width: 0.75rem;
+    height: 0.75rem;
+    line-height: 0.75rem;
+  }
+  .van-checkbox__icon--checked .van-icon{
+    background-color: #FE9527;
+    border-color: #FE9527;
+  }
+  .van-loading{
+    text-align: center;
+    margin-top: 1rem;
+  }
+  .wy-no-data{
+    width: 8.96rem;
+    height: 5.73rem;
+    background: url('@/assets/img/icon/icon-no-data.png') no-repeat;
+    background-size: 100%;
+    padding-top: 7.5rem;
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: #666666;
+    margin: 6rem auto 0;
+  }
+  .resume-label{
+    padding: 1.28rem 0 1.09rem;
+    margin: 0 0.56rem;
+    border-bottom: 1px solid #F3F3F3;
+  }
+  .resume-label h3{
+    font-size: 0.96rem;
+    line-height: 0.96rem;
+    font-weight: 400;
+    color: #333333;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.77rem;
+  }
+  .resume-label h4{
+    line-height: 0.8rem;
+    font-size: 0.8rem;
+    font-weight: 400;
+    color: #333333;
+    margin-bottom: 0.59rem;
+    display: flex;
+    justify-content: space-between;
+  }
+  .resume-label h5{
+    font-size: 0.8rem;
+    line-height: 0.8rem;
+    font-weight: 300;
+    color: #333333;
+    margin-bottom: 0.93rem;
+  }
+  .resume-label p{
+    font-size: 0.64rem;
+    line-height: 0.64rem;
+    font-weight: 300;
+    color: #666666;
+    margin-bottom: 0.69rem;
+  }
+  .resume-label textarea{
+    font-size: 0.75rem;
+    font-weight: 100;
+    color: #666666;
+    line-height: 1.39rem;
+    margin-top: 0;
+  }
+  .resume-label .van-swipe-cell{
+    border-bottom: 1px solid #f3f3f3;
+    margin-bottom: 1.5rem;
+  }
+  .resume-label .van-swipe-cell:last-child{
+    border: none;
+    margin-bottom: 0;
+  }
+  .resume-label .van-swipe-cell__right{
+    display: flex;
+    align-items: center;
+  }
+  .resume-label .van-cell{
+    padding-top: 0;
+  }
+  .resume-label .van-cell:after{
+    border: none;
+  }
+  .resume-label .delete{
+    width: 1.87rem;
+    height: 1.87rem;
+    margin-left: 0.2rem;
+  }
+  .resume-label label{
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    font-weight: 100;
+    color: #999999;
+  }
+  .resume-label .van-cell{
+    padding: 0.8rem 0 0.6rem;
+    font-size: 0.8rem;
+    line-height: 0.8rem;
+    font-weight: 100;
+    color: #999999;
+  }
+  .user-item{
+    margin-bottom: 1.47rem;
+    border-bottom: 1px solid #f3f3f3;
+  }
+  .user-item .van-cell{
+    padding-left: 0;
+  }
+  .user-item h5{
+    font-size: 0.75rem;
+    line-height: 0.75rem;
+    font-weight: 300;
+    color: #666666;
+  }
+  .wy-submit{
+    height: 2.35rem;
+    background: linear-gradient(90deg, #FEA829, #FE8F27);
+    border-radius: 0.27rem;
+    margin: 0 0.64rem 0.64rem;
+    position: fixed;
+    bottom: 0;
+    left:0;
+    width: calc(100vw - 1.28rem);
+    border: none;
+    font-size: 0.8rem;
+    font-weight: 400;
+    color: #FFFFFF;
+  }

src/components/list/TaskList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="task-item">
+    <div class="task-item" v-for="(item,index) in taskList" :key="index" @click="gotoDetail(item.id)">
          <div class="task-item-top">
              <h3>移动端小程序前端开发</h3>
              <span>紧急</span>
@@ -27,16 +27,23 @@
 </template>
 <script setup lang="ts">
   import { useRouter } from "vue-router";    
+  const props=defineProps({
+    taskList:{
+        type:Array,
+        default:()=>[]
+    }
+  })
   const router=useRouter()
-  const gotoPage=(path:any)=>{
-     router.push(path)
+  const gotoDetail=(id:any)=>{
+     router.push('/task/details/'+id)
   }
 </script>
 <style  scoped>
 .task-item{
-    background-color: #ffffff;
+    background: #FFFFFF;
     border-radius: 0.53rem;
-    margin:0 0.64rem 0.53rem;
+    margin:0 0 0.53rem;
+    padding: 0.88rem 0.48rem 0.75rem;
     position: relative;
     font-size: 0.69rem;
     font-weight: 100;
@@ -44,6 +51,7 @@
 }
 .task-item-top{
     display: flex;
+
 }
 .task-item-top h3{
     font-size: 0.91rem;

src/main.ts

@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
-import "./assets/css/style.css";
+import './assets/css/style.css'
 import 'vant/lib/index.css'
 import App from './App.vue'
 import store from "./store/index.ts";
 import router from "./router";
-import './utils/rem.ts'
+import './utils/rem'
 import { Button,NavBar,Tabbar,TabbarItem,Checkbox,Toast,Icon } from "vant";
 const app = createApp(App)
 app.use(Button)

src/utils/rem.ts

@@ -1,12 +1,11 @@
-//定义大小
-
-
+// 基准大小
 const baseSize = 37.5
 function setRem () {
     const scale = document.documentElement.clientWidth / 750
     document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'
-    
+    console.log(document.documentElement.style.fontSize);
 }
+// 初始化
 setRem()
 window.onresize = function(){
     setRem()

src/view/task/index.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
 import FooterTabbar from '@/components/FooterTabbar.vue'
 import TaskList from '@/components/list/TaskList.vue'
+import { reactive } from 'vue'
+const taskList=reactive([
+    {
+       id:1
+    },
+    {
+       id:2
+    },
+    ])
 </script>
+
 <template>
     <div>
-        <TaskList></TaskList>
+        <TaskList :taskList="taskList"></TaskList>
         <FooterTabbar></FooterTabbar>
     </div>
 </template>