ios页面更改

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;
+    }
   }
 
 }