ios页面更改

src/views/documentView/docmentList.vue

@@ -0,0 +1,156 @@
+<template>
+<div class="wrap">
+  <div class="navBar">
+    <van-nav-bar
+        title="文档资料"
+        left-arrow
+        left-arrow-color="#FFFFFF"
+        :border="false"
+        :fixed="true"
+        :safe-area-inset-top="true"
+        @click-left="goBack"
+    >
+      <template slot="right">
+        <div class="rightWrap">
+          <img src="@/assets/serach.png" class="img2"/>
+        </div>
+      </template>
+    </van-nav-bar>
+  </div>
+  <div class="tab_wrap">
+    <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+         @click="changeTab(index)">
+      {{ item.name }}
+    </div>
+  </div>
+  <div class="contentWrap">
+        <div class="itemWrap">
+            <div class="info flexBetween common">
+              <div class="title">会记回家和</div>
+              <div class="time">2023-08-24 13:14:00</div>
+            </div>
+           <div class="imgWrap">
+             <img src="@/assets/empty.png">
+           </div>
+           <div class="num common">111</div>
+            <div class="doc flexBetween common">
+              <div class="left">培训材料</div>
+              <div class="right">
+                <span style="color: red;font-size: 14px;margin-right: 8px">未处理</span>
+                <span style="opacity: .9;color: #ccc">阅读8</span>
+              </div>
+            </div>
+        </div>
+  </div>
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+export default {
+  name: "trainDocment",
+  mixins:[myMixins],
+  data(){
+    return{
+      tabArr: [{name: '中道制度', status: 1}, {name: '技术参数', status: 2},],
+      activeIndex: 0,
+      orderList: [],
+    }
+  },
+  methods:{
+   changeTab(index) {
+    this.activeIndex = index
+    // this.total = 0;
+    this.pageNum = 1
+    this.orderList = [];
+  },
+}
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/common.scss";
+@import "@/styles/mixin.scss";
+.wrap{
+  width: 100%;
+  height: 100%;
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.rightWrap {
+  @include flexCenter;
+  .img2 {
+    @include wh(17px, 17px)
+  }
+}
+.tab_wrap {
+  @include fontWeightSize(bolder, 15px);
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 0 5px 0;
+  color: #737373;
+  opacity: .7;
+  div {
+    padding-top: 8px;
+  }
+  .active {
+    color: #3678FF;
+    position: relative;
+  }
+
+  .active:after {
+    content: '';
+    display: block;
+    width: 50px;
+    height: 3px;
+    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.contentWrap{
+  padding: 0 8px;
+  width: 100%;
+  box-sizing: border-box;
+  .itemWrap{
+    margin-top: 16px;
+    @include wh(100%, 300px);
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+    border-radius: 3px;
+    box-sizing: border-box;
+    @include flexColumn;
+    justify-content: space-around;
+    padding: 6px 0;
+    @include fontWeightSize(400, 12px);
+    .flexBetween{
+      @include flexColBet;
+    }
+    .common{
+      margin: 0 15px ;
+    }
+    .imgWrap{
+      width: 100%;
+      height: 200px;
+      //background-color: #6C81CD;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+    }
+    .left{
+      color: red;
+      font-size: 15px;
+      font-weight: 500;
+    }
+  }
+
+}
+</style>

src/views/documentView/trainDocment.vue

@@ -19,19 +19,19 @@
   </div>
   <div class="contentWrap">
         <div class="itemWrap">
-            <div class="info">
+            <div class="info flexBetween common">
               <div class="title">会记回家和</div>
               <div class="time">2023-08-24 13:14:00</div>
             </div>
            <div class="imgWrap">
              <img src="@/assets/empty.png">
            </div>
-           <div class="num">111</div>
-            <div class="doc">
+           <div class="num common">111</div>
+            <div class="doc flexBetween common">
               <div class="left">培训材料</div>
               <div class="right">
-                <span>未处理</span>
-                <span>阅读 8</span>
+                <span style="color: red;font-size: 14px;margin-right: 8px">未处理</span>
+                <span style="opacity: .9;color: #ccc">阅读8</span>
               </div>
             </div>
         </div>
@@ -41,9 +41,31 @@
 
 <script>
 import {myMixins} from "@/utils/myMixins"
+import {pageList} from  "@/api/mine"
 export default {
   name: "trainDocment",
   mixins:[myMixins],
+  data(){
+    return{
+      pageNum:1,
+      pageSize:10
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods:{
+    async getList(){
+      let res= await pageList({
+        pageNum:this.pageNum,
+        pageSize:this.pageSize,
+        userId:54585,
+        docType:2
+      })
+      console.log(res)
+
+    }
+  }
 }
 </script>
 
@@ -76,9 +98,30 @@ export default {
     box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
     border-radius: 3px;
     box-sizing: border-box;
-    //padding: 11px 13px 9px 15px;
+    @include flexColumn;
+    justify-content: space-around;
+    padding: 6px 0;
     @include fontWeightSize(400, 12px);
-    @include flexBetween;
+    .flexBetween{
+      @include flexColBet;
+    }
+    .common{
+      margin: 0 15px ;
+    }
+    .imgWrap{
+      width: 100%;
+      height: 200px;
+      //background-color: #6C81CD;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+    }
+    .left{
+      color: red;
+      font-size: 15px;
+      font-weight: 500;
+    }
   }
 
 }