修改样式

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover"
     />
     <title>酷医云移动端</title>
   </head>

src/pages/doctorAdvice/index.vue

@@ -41,6 +41,7 @@
         <van-icon name="cross" />
       </div>
       <van-search
+        class="doctorAdviceSearch"
         v-model="value"
         placeholder="请输入病人名字"
         @cancel="onCancel"
@@ -495,5 +496,10 @@ export default {
       flex-basis: 28% !important;
     }
   }
+  .doctorAdviceSearch {
+    .van-field__body {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages/home/index.vue

@@ -100,7 +100,7 @@
             <div>商城</div>
           </van-tabbar-item>
         </router-link>
-        <router-link to="/my">
+        <router-link to="/newMy">
           <van-tabbar-item>
             <i class="iconfont icon-wode iconOne"></i>
             <div>我的</div>
@@ -156,6 +156,7 @@ export default {
   }
   .homeBottom {
     height: 3.125rem;
+    padding-bottom: env(safe-area-inset-bottom);
   }
   ::-webkit-scrollbar {
     width: 0;

src/pages/homeIndex/index.vue

@@ -8,7 +8,7 @@
           </van-dropdown-menu>
         </div>
         <div class="homeTitleRight">
-          <i class="iconfont icon-sousuo search1"></i>
+          <i class="iconfont icon-sousuo search1" @click="toSearch"></i>
           <van-icon class="iconOne" name="comment-o" />
           <van-icon class="iconOne" name="add-o" />
         </div>
@@ -146,6 +146,9 @@ export default {
   methods: {
     toPatients() {
       this.$router.push({ path: "/patients" });
+    },
+    toSearch() {
+      this.$router.push({ path: "/search" });
     }
   },
   created() {

src/pages/my/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="page_my">
+    <div class="myTop">
+      <img src="../../assets/images/myBanner.png" alt />
+      <div class="avatar">
+        <img src="../../assets/images/m01.png" alt />
+      </div>
+      <div class="userMain">
+        <div class="userBox">
+          <div class="userTxt">
+            <p class="userName">小可耐</p>
+            <p class="signature">一个无法用言语表达的好人</p>
+          </div>
+          <van-icon name="arrow" />
+        </div>
+      </div>
+      <div class="invitebox">
+        <img src="../../assets/images/invite.png" alt />
+      </div>
+      <div class="myInfo">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon1.png" alt />
+          <p>我的信息</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+    </div>
+    <div class="myBox">
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon2.png" alt />
+          <p>我的医院/组织/团队</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+      <div class="myBoxTwo">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/m01.png" alt />
+          <p>我的医院/组织/团队</p>
+        </div>
+        <div class="myInfoRight">
+          <van-icon class="arrow" name="arrow" />
+        </div>
+      </div>
+      <div class="myBoxTwo noBorder">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/m01.png" alt />
+          <p>我的医院/组织/团队</p>
+        </div>
+        <div class="myInfoRight">
+          <div class="myInfoRightBtn">管理</div>
+          <van-icon class="arrow" name="arrow" />
+        </div>
+      </div>
+    </div>
+    <div class="myBox">
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon3.png" alt />
+          <p>创建医院/组织/团队</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon4.png" alt />
+          <p>修改密码</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+    </div>
+    <div class="myBox">
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon5.png" alt />
+          <p>常见问题</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon6.png" alt />
+          <p>意见反馈</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon7.png" alt />
+          <p>关于我们</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+    </div>
+    <div class="myBox">
+      <div class="myBoxOne">
+        <div class="myInfoLeft">
+          <img src="../../assets/images/myIcon8.png" alt />
+          <p>退出登录</p>
+        </div>
+        <van-icon class="arrow" name="arrow" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page_my {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fafafa;
+  .myTop {
+    position: relative;
+    height: 16.875rem;
+    img {
+      width: 100%;
+      height: 11.25rem;
+    }
+    .avatar {
+      position: absolute;
+      left: 1rem;
+      top: 2.5rem;
+      width: 4.375rem;
+      height: 4.375rem;
+      background: rgba(50, 50, 50, 1);
+      border: 2px solid rgba(255, 255, 255, 1);
+      border-radius: 50%;
+      img {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .userMain {
+      position: absolute;
+      left: 6.25rem;
+      top: 3.375rem;
+      width: 70%;
+      color: #fff;
+    }
+    .userBox {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .userName {
+      font-size: 1.25rem;
+      margin-bottom: 0.625rem;
+    }
+    .signature {
+      font-size: 0.75rem;
+    }
+    .invitebox {
+      width: 21.5625rem;
+      height: 4.75rem;
+      position: absolute;
+      top: 8.75rem;
+      left: 0.9375rem;
+      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.16);
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .myInfo {
+      width: 100%;
+      height: 3.125rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 2.25rem;
+      padding: 0 0.875rem;
+      background: #fff;
+      .myInfoLeft {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        img {
+          width: 1.125rem;
+          height: 1.125rem;
+          margin-right: 0.5rem;
+        }
+        p {
+          margin-top: 0.125rem;
+        }
+      }
+      .arrow {
+        color: #9f9f9f;
+      }
+    }
+  }
+  .myBox {
+    margin: 0.8125rem 0;
+    background: #fff;
+    > div:last-child {
+      border: none;
+    }
+    .myBoxOne {
+      width: 100%;
+      height: 3.125rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 0.875rem;
+      border-bottom: 1px solid #e5e5e5;
+      .myInfoLeft {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        img {
+          width: 1.125rem;
+          height: 1.125rem;
+          margin-right: 0.5rem;
+        }
+        // p {
+        //   margin-top: 0.125rem;
+        // }
+      }
+      .arrow {
+        color: #9f9f9f;
+      }
+    }
+    .myBoxTwo {
+      height: 3.125rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 0.875rem;
+      background: #fff;
+      margin-left: 2.5rem;
+      border-bottom: 1px solid #e5e5e5;
+      .myInfoLeft {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        img {
+          width: 1.875rem;
+          height: 1.875rem;
+          margin-right: 0.5rem;
+        }
+        // p {
+        //   margin-top: 0.125rem;
+        // }
+      }
+      .myInfoRight {
+        display: flex;
+        align-items: center;
+        .myInfoRightBtn {
+          width: 3.625rem;
+          height: 1.875rem;
+          background: rgba(255, 255, 255, 1);
+          border: 1px solid rgba(51, 138, 251, 1);
+          border-radius: 0.3125rem;
+          text-align: center;
+          line-height: 1.875rem;
+          color: #338afb;
+          font-size: 0.9375rem;
+          margin-right: 0.625rem;
+        }
+      }
+      .arrow {
+        color: #9f9f9f;
+      }
+    }
+  }
+}
+</style>

src/pages/patientManagement/components/Blood.vue

@@ -65,6 +65,9 @@
 <script>
 import { getAllBloodDialysisPatient } from "@/api/patient/patient";
 export default {
+  props: {
+    searchValue: String
+  },
   data() {
     return {
       value: "",
@@ -160,27 +163,13 @@ export default {
     }
   },
   created() {
-    const baseSize = 32;
-    // 设置 rem 函数
-    function setRem() {
-      const scale = document.documentElement.clientWidth / 750;
-      document.documentElement.style.fontSize =
-        baseSize * Math.min(scale, 2) + "px";
-      //   // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
-      //   let htmlWidth =
-      //     document.documentElement.clientWidth || document.body.clientWidth;
-      //   //得到html的Dom元素
-      //   let htmlDom = document.getElementsByTagName("html")[0];
-      //   //设置根元素字体大小
-      //   htmlDom.style.fontSize = htmlWidth / 23.4375 + "px";
-    }
-    // 初始化
-    setRem();
-    // 改变窗口大小时重新设置 rem
-    window.onresize = function() {
-      setRem();
-    };
+    console.log(this.searchValue);
     this.getAllBloodDialysisPatient();
+  },
+  watch: {
+    searchValue(newVal) {
+      console.log(newVal);
+    }
   }
 };
 </script>

src/pages/patientManagement/components/Member.vue

@@ -22,6 +22,9 @@
 <script>
 import { getAllMemberPatient } from '@/api/patient/patient'
 export default {
+  props: {
+    searchValue: String
+  },
   data () {
     return {
       loading: false,
@@ -70,27 +73,13 @@ export default {
     }
   },
   created () {
-    const baseSize = 32
-    // 设置 rem 函数
-    function setRem () {
-      const scale = document.documentElement.clientWidth / 750
-      document.documentElement.style.fontSize =
-        baseSize * Math.min(scale, 2) + 'px'
-      //   // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
-      //   let htmlWidth =
-      //     document.documentElement.clientWidth || document.body.clientWidth;
-      //   //得到html的Dom元素
-      //   let htmlDom = document.getElementsByTagName("html")[0];
-      //   //设置根元素字体大小
-      //   htmlDom.style.fontSize = htmlWidth / 23.4375 + "px";
-    }
-    // 初始化
-    setRem()
-    // 改变窗口大小时重新设置 rem
-    window.onresize = function () {
-      setRem()
-    }
+    console.log(this.searchValue)
     this.getAllMemberPatient()
+  },
+  watch: {
+    searchValue(newVal) {
+      console.log(newVal);
+    }
   }
 }
 </script>

src/pages/patientManagement/components/Slow.vue

@@ -23,6 +23,9 @@ import {
   getAllSlowPatient
 } from '@/api/patient/patient'
 export default {
+  props: {
+    searchValue: String
+  },
   data () {
     return {
       loading: false,
@@ -71,27 +74,12 @@ export default {
     }
   },
   created () {
-    const baseSize = 32
-    // 设置 rem 函数
-    function setRem () {
-      const scale = document.documentElement.clientWidth / 750
-      document.documentElement.style.fontSize =
-        baseSize * Math.min(scale, 2) + 'px'
-      //   // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
-      //   let htmlWidth =
-      //     document.documentElement.clientWidth || document.body.clientWidth;
-      //   //得到html的Dom元素
-      //   let htmlDom = document.getElementsByTagName("html")[0];
-      //   //设置根元素字体大小
-      //   htmlDom.style.fontSize = htmlWidth / 23.4375 + "px";
-    }
-    // 初始化
-    setRem()
-    // 改变窗口大小时重新设置 rem
-    window.onresize = function () {
-      setRem()
-    }
     this.getAllSlowPatient()
+  },
+  watch: {
+    searchValue(newVal) {
+      console.log(newVal);
+    }
   }
 }
 </script>

src/pages/patientManagement/patientManagement.vue

@@ -35,13 +35,13 @@
           </div>
         </van-tab>
         <van-tab title="血透患者">
-          <Blood></Blood>
+          <Blood :searchValue="value"></Blood>
         </van-tab>
         <van-tab title="慢病患者">
-          <Slow></Slow>
+          <Slow :searchValue="value"></Slow>
         </van-tab>
         <van-tab title="会员患者">
-          <Member></Member>
+          <Member :searchValue="value"></Member>
         </van-tab>
       </van-tabs>
     </div>

src/pages/search/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="page_search">
     <div class="header">
-      <i class="iconfont icon-zuojiantou"></i>
+      <i class="iconfont icon-zuojiantou" @click="toHomeIndex"></i>
       <van-search v-model="value" placeholder=" 姓名 / 首拼 / 透析号" />
     </div>
     <div class="searchList">
       <div class="patientOne">
-        <img src="../../assets/images/one.jpg" alt="" />
+        <img src="../../assets/images/m01.png" alt="" />
         <p>名字</p>
       </div>
     </div>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { SaveSearch } from "@/api/login/login";
+// import { SaveSearch } from "@/api/login/login";
 export default {
   data() {
     return {
@@ -68,6 +68,9 @@ export default {
     },
     watchNum() {
       console.log(this.searchVal);
+    },
+    toHomeIndex() {
+      this.$router.push({ path: "/homeIndex" });
     }
   }
 };
@@ -127,7 +130,6 @@ export default {
     }
     .recordOne {
       min-width: 0.0625rem;
-      height: 1.6875rem;
       background: rgba(244, 244, 244, 1);
       border-radius: 14px;
       color: rgba(155, 155, 155, 1);

src/router/index.js

@@ -1,169 +1,184 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
-  routes: [{
-      path: '/',
-      name: 'Home',
-      component: () => import('@/pages/home/verifyToken')
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: () => import("@/pages/home/verifyToken")
     },
     {
-      path: '/login',
-      name: 'Home',
-      component: () => import('@/pages/home/login')
+      path: "/login",
+      name: "Home",
+      component: () => import("@/pages/home/login")
     },
     {
-      path: '/nopassword',
-      name: 'Home',
-      component: () => import('@/pages/home/noPassword')
+      path: "/nopassword",
+      name: "Home",
+      component: () => import("@/pages/home/noPassword")
     },
     {
-      path: '/setname',
-      name: 'Home',
-      component: () => import('@/pages/home/register/name')
+      path: "/setname",
+      name: "Home",
+      component: () => import("@/pages/home/register/name")
     },
     {
-      path: '/register',
-      name: 'Home',
-      component: () => import('@/pages/home/register/register')
+      path: "/register",
+      name: "Home",
+      component: () => import("@/pages/home/register/register")
     },
     {
-      path: '/join',
-      name: 'Home',
-      component: () => import('@/pages/home/noJoinedGroup')
+      path: "/join",
+      name: "Home",
+      component: () => import("@/pages/home/noJoinedGroup")
     },
     {
-      path: '/forget',
-      name: 'Home',
-      component: () => import('@/pages/home/forgetPassword')
+      path: "/forget",
+      name: "Home",
+      component: () => import("@/pages/home/forgetPassword")
     },
     {
-      path: '/createorg',
-      name: 'Home',
-      component: () => import('@/pages/home/createOrg')
+      path: "/createorg",
+      name: "Home",
+      component: () => import("@/pages/home/createOrg")
     },
     // 首页
     {
-      path: '/myIndex',
-      name: 'myIndex',
-      component: () => import('@/pages/home/index'),
-      children: [{
-        path: '/homeIndex',
-        component: () => import('@/pages/homeIndex/index.vue')
-      }]
+      path: "/myIndex",
+      name: "myIndex",
+      component: () => import("@/pages/home/index"),
+      children: [
+        {
+          path: "/homeIndex",
+          component: () => import("@/pages/homeIndex/index.vue")
+        },
+        // 我的
+        {
+          path: "/newMy",
+          name: "newMy",
+          component: () => import("@/pages/my/index")
+        }
+      ]
     },
     // 患者中心
     {
-      path: '/patients',
-      name: 'patients',
-      component: () => import('@/pages/patientManagement/patientManagement')
+      path: "/patients",
+      name: "patients",
+      component: () => import("@/pages/patientManagement/patientManagement")
     },
     // 新增病人
     {
-      path: '/addPatints',
-      name: 'addpatients',
-      component: () => import('@/pages/patients/addPatient')
+      path: "/addPatints",
+      name: "addpatients",
+      component: () => import("@/pages/patients/addPatient")
     },
     // 全部病程
     {
-      path: '/coursedetail',
-      name: 'coursedetail',
-      component: () => import('@/pages/allCourseManagement/index')
+      path: "/coursedetail",
+      name: "coursedetail",
+      component: () => import("@/pages/allCourseManagement/index")
     },
     // 全部干体重
     {
-      path: '/dryweight',
-      name: 'dryweight',
-      component: () => import('@/pages/allDryWeight/index')
+      path: "/dryweight",
+      name: "dryweight",
+      component: () => import("@/pages/allDryWeight/index")
     },
     // 基本信息
     {
-      path: '/editPatient',
-      name: 'editPatient',
-      component: () => import('@/pages/patients/editPatient')
+      path: "/editPatient",
+      name: "editPatient",
+      component: () => import("@/pages/patients/editPatient")
     },
     //
     {
-      path: '/patientdetail',
-      name: 'patientdetail',
-      component: () => import('@/pages/doctorAdvice/index')
+      path: "/patientdetail",
+      name: "patientdetail",
+      component: () => import("@/pages/doctorAdvice/index")
+    },
+    // 搜索
+    {
+      path: "/search",
+      name: "search",
+      component: () => import("@/pages/search/index")
     },
     {
-      path: '/product',
-      name: 'Product',
-      component: () => import('@/pages/product/index')
+      path: "/product",
+      name: "Product",
+      component: () => import("@/pages/product/index")
     },
     {
-      path: '/main',
-      name: 'main',
-      component: () => import('@/pages/main/index')
+      path: "/main",
+      name: "main",
+      component: () => import("@/pages/main/index")
     },
     {
-      path: '/details',
-      name: 'details',
-      component: () => import('@/pages/main/DetailsPage')
+      path: "/details",
+      name: "details",
+      component: () => import("@/pages/main/DetailsPage")
     },
     {
-      path: '/monitoring',
-      name: 'monitorPage',
-      component: () => import('@/pages/monitoring/index')
+      path: "/monitoring",
+      name: "monitorPage",
+      component: () => import("@/pages/monitoring/index")
     },
     {
-      path: '/my',
-      name: 'my',
-      component: () => import('@/pages/personal/index')
+      path: "/my",
+      name: "my",
+      component: () => import("@/pages/personal/index")
     },
     {
-      path: '/advice',
-      name: 'doctorAdvice',
-      component: () => import('@/pages/advice/index')
+      path: "/advice",
+      name: "doctorAdvice",
+      component: () => import("@/pages/advice/index")
     },
     {
-      path: '/EditPersonal',
-      name: 'EditPersonal',
-      component: () => import('@/pages/personal/EditPersonal')
+      path: "/EditPersonal",
+      name: "EditPersonal",
+      component: () => import("@/pages/personal/EditPersonal")
     },
     {
-      path: '/ElectronicSignature',
-      name: 'ElectronicSignature',
-      component: () => import('@/pages/personal/ElectronicSignature')
+      path: "/ElectronicSignature",
+      name: "ElectronicSignature",
+      component: () => import("@/pages/personal/ElectronicSignature")
     },
     {
-      path: '/Print',
-      name: 'Print',
-      component: () => import('@/pages/main/PrintIndex')
+      path: "/Print",
+      name: "Print",
+      component: () => import("@/pages/main/PrintIndex")
     },
     {
-      path: '/add_urgent_schedule',
-      name: 'AddUrgentSchedule',
-      component: () => import('@/pages/main/add_urgent_schedule')
+      path: "/add_urgent_schedule",
+      name: "AddUrgentSchedule",
+      component: () => import("@/pages/main/add_urgent_schedule")
     },
     {
-      path: '/Prints',
-      name: 'Prints',
-      component: () => import('@/pages/main/Print')
+      path: "/Prints",
+      name: "Prints",
+      component: () => import("@/pages/main/Print")
     },
     {
-      path: '/forgetPassword',
-      name: 'forgetPassword',
-      component: () => import('@/pages/personal/ForgetPassword')
+      path: "/forgetPassword",
+      name: "forgetPassword",
+      component: () => import("@/pages/personal/ForgetPassword")
     },
     {
-      path: '/changePassword',
-      name: 'changePassword',
-      component: () => import('@/pages/personal/ChangePassword')
+      path: "/changePassword",
+      name: "changePassword",
+      component: () => import("@/pages/personal/ChangePassword")
     },
     {
-      path: '/privacy',
-      name: 'privacy',
-      component: () => import('@/pages/privacy/index')
+      path: "/privacy",
+      name: "privacy",
+      component: () => import("@/pages/privacy/index")
     },
     {
-      path: '/userAgreement',
-      name: 'userAgreement',
-      component: () => import('@/pages/userAgreement/index')
+      path: "/userAgreement",
+      name: "userAgreement",
+      component: () => import("@/pages/userAgreement/index")
     }
   ]
-})
+});