faet: ui

2 years ago · 9ac1d90f29
45 changed files with 1254 additions and 267 deletions
--- a/App.vue
+++ b/App.vue
@ -23,4 +23,9 @@ export default {
 page {
 	background-color: #f5f5f5;
 }
+
+uni-page-body {
+	min-height: 100%;
+	height: 100%;
+}
 </style>
--- a/components/CreatePatient/CreatePatient.vue
+++ b/components/CreatePatient/CreatePatient.vue
@ -0,0 +1,90 @@
+<template>
+  <uni-card :is-shadow="false" :border="false" style="width: 40vw" padding="10px">
+    <template v-slot:title>
+      <view class="text-center u-font-16 font-bold uni-mt-10">
+        患者信息
+      </view>
+    </template>
+
+    <uni-forms ref="formRef" :modelValue="formData" :rules="rules">
+      <uni-forms-item label="姓名" name="name">
+        <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
+      </uni-forms-item>
+      <uni-forms-item name="gender" label="性别">
+        <uni-data-checkbox v-model="formData.gender" :localdata="genders" />
+      </uni-forms-item>
+      <uni-forms-item label="身份证" name="idCard">
+        <uni-easyinput type="text" v-model="formData.idCard" placeholder="请输入身份证号" />
+      </uni-forms-item>
+      <uni-forms-item label="民族" name="nation">
+        <uni-easyinput type="text" v-model="formData.nation" placeholder="请输入民族" />
+      </uni-forms-item>
+    </uni-forms>
+
+    <template v-slot:actions>
+      <view class="flex primary justify-center uni-pb-10" @click="$emit('on-scan')">
+        扫描身份证
+      </view>
+      <view class="flex justify-between uni-mb-16">
+        <u-button size="medium" shape="circle" @click="onCancel">取消</u-button>
+        <u-button size="medium" type="primary" shape="circle" class="bg-main" @click="onConfirm">确定</u-button>
+      </view>
+    </template>
+  </uni-card>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+const emits = defineEmits(['on-cancel', 'on-confirm', 'on-scan'])
+
+const formData = reactive({
+  name: '',
+  gender: 0,
+  idCard: '',
+  nation: '汉'
+})
+
+const rules = {
+  name: { rules: [{ required: true, errorMessage: '请输入姓名' }] },
+  idCard: {
+    rules: [
+      { required: true, errorMessage: '请输入身份证号' },
+      {
+        validateFunction(_rule, value: string, _data, callback: Function) {
+          const reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
+          if (!reg.test(value)) {
+            callback('身份证格式不正确')
+          }
+          return true
+        }
+      }]
+  },
+  nation: { rules: [{ required: true, errorMessage: '请输入民族' }] },
+}
+
+const genders = [
+  { label: '男', value: 0, text: '男' },
+  { label: '女', value: 1, text: '女' }
+]
+
+const formRef = ref()
+
+function onCancel() {
+  emits('on-cancel')
+}
+
+function onConfirm() {
+  if (!formRef.value) return
+  formRef.value.validate().then(res => {
+    console.log(res);
+    emits('on-confirm', formData)
+  }).catch(error => {
+    console.log(error);
+
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/components/DetailBase/DetailBase.vue
+++ b/components/DetailBase/DetailBase.vue
@ -0,0 +1,9 @@
+<template>
+  <div class="DetailBase">DetailBase</div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps();
+</script>
+
+<style lang="scss" scoped></style>
--- a/components/FloatButton/FloatButton.vue
+++ b/components/FloatButton/FloatButton.vue
@ -0,0 +1,52 @@
+<template>
+  <view class="float-btn">
+    <u-image @click="toggle" class="icon-btn icon-menu" src="@/static/images/menu.png" mode="aspectFill"></u-image>
+
+    <u-image v-show="showChild" class="icon-btn icon-user" src="@/static/images/user.png" mode="aspectFill"></u-image>
+    <u-image v-show="showChild" class=" icon-btn icon-heart" src="@/static/images/heart.png" mode="aspectFill"></u-image>
+    <u-image v-show="showChild" class="icon-btn icon-bed" src="@/static/images/bed.png" mode="aspectFill"></u-image>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const showChild = ref(false)
+
+function toggle() {
+  showChild.value = !showChild.value
+}
+</script>
+
+<style lang="scss" scoped>
+.float-btn {
+  width: 140rpx;
+  height: 140rpx;
+  position: fixed;
+  right: 20px;
+  bottom: 250rpx;
+
+  .icon-btn {
+    width: 140rpx !important;
+    height: 140rpx !important;
+  }
+
+  .icon-user {
+    position: absolute;
+    right: 10%;
+    top: -100%;
+  }
+
+  .icon-heart {
+    position: absolute;
+    right: 100%;
+    top: 0;
+  }
+
+  .icon-bed {
+    position: absolute;
+    right: 10%;
+    top: 100%;
+  }
+}
+</style>
--- a/components/SearchList/SearchList.vue
+++ b/components/SearchList/SearchList.vue
@ -0,0 +1,37 @@
+<template>
+  <view>
+    <view class="bg-main-v border-radius-9-up u-p-r-40 flex ">
+      <image class="icon-car" src="@/static/images/car.png" mode="aspectFill" />
+      <text class="font-bold text-white">{{ carNo }}</text>
+    </view>
+    <view class="bg-white border-radius-9-down u-p-l-40 u-p-r-40 u-p-t-20 u-p-b-20">
+      <uni-easyinput class="search-circle" v-model="searchValue" type="text" prefixIcon="search" :inputBorder="false" placeholder="搜索患者"
+                     @confirm="onSearch" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const carNo = ref('PC0001')
+const searchValue = ref('')
+
+function onSearch() {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-car {
+  width: 48rpx;
+  height: 48rpx;
+  margin: 20rpx 20rpx 20rpx 40rpx;
+}
+
+.search-circle :deep(.uni-easyinput__content) {
+  background-color: #f5f5f8 !important;
+  border-radius: 35rpx;
+
+}
+</style>
--- a/config/local.ts
+++ b/config/local.ts
@ -0,0 +1,3 @@
+export const LOCAL_KEY = {
+  LOADED: 'loaded', // 用来显示启动页 有本地数据不显示启动页 没有才显示
+}
--- a/index.html
+++ b/index.html
@ -3,11 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <script>
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
-        CSS.supports('top: constant(a)'))
+      var coverSupport =
+        'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+          (coverSupport ? ', viewport-fit=cover' : '') +
+          '" />'
+      )
    </script>
    <title></title>
    <!--preload-links-->
@ -16,5 +18,6 @@
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
+    <script src="/uni-webview-js.js"></script>
  </body>
 </html>
--- a/main.js
+++ b/main.js
@ -1,12 +1,17 @@
 import * as Pinia from 'pinia'

 import App from './App.vue'
+import { LOCAL_KEY } from '@/config/local'
 import { createSSRApp } from 'vue'
+import { openPage } from '@/utils/common'
 import { setupApi } from '@/api'
 import { setupHttp } from '@/utils/http'
 import { setupStore } from '@/store'
 import uView from './uni_modules/vk-uview-ui'

+uni.$u.openPage = openPage
+uni.$u.LOCAL_KEY = LOCAL_KEY
+
 export function createApp() {
  const app = createSSRApp(App)
  setupHttp(app)
--- a/manifest.json
+++ b/manifest.json
--- a/package.json
+++ b/package.json
--- a/pages.json
+++ b/pages.json
@ -1,17 +1,47 @@
 {
-	"pages": [{
-		"path": "pages/index/index",
-		"style": {
-			"navigationBarTitleText": "uni-app"
-		}
-	}],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
-		"app-plus": {
-			"background": "#efeff4"
-		}
-	}
+  "pages": [
+    {
+      "path": "pages/loading/loading",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "uni-app",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/patient-list/patient-list",
+      "style": {
+        "navigationBarTitleText": "患者列表"
+      }
+    },
+    {
+      "path": "pages/detail1/detail1",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "患者详情"
+      }
+    },
+    {
+      "path": "pages/detail2/detail2",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "患者详情"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "暴风眼质控",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8",
+    "app-plus": {
+      "background": "#efeff4"
+    }
+  }
 }
--- a/pages/detail1/detail1.vue
+++ b/pages/detail1/detail1.vue
@ -0,0 +1,211 @@
+<template>
+  <view class="bg-main-r">
+    <uni-nav-bar dark left-icon="left" background-color="transparent" :border="false" title="患者详情" @clickRight="onClickRight"
+                 @clickLeft="onClickLeft">
+      <template v-slot:right>
+        <view class="flex nav-right">
+          切换至详情 <u-image class="icon-change" src="@/static/images/change.png" mode="aspectFill"></u-image>
+        </view>
+      </template>
+    </uni-nav-bar>
+
+    <view class="flex justify-between head">
+      <view class="column text-white">
+        <text class="u-font-xl font-bold">暴风眼质控</text>
+        <text>高效 便捷 精准</text>
+      </view>
+
+      <view class="btn-create">
+        <image class="icon-plus" src="@/static/images/plus.png" mode="scaleToFill" />
+        急诊溶栓记录
+      </view>
+      <!-- <view></view> -->
+      <image class="icon-doctor" src="@/static/images/doctor.png" mode="scaleToFill" />
+    </view>
+
+    <view class="flex u-m-l-40 u-m-r-40 align-top content">
+      <view class="flex-1 u-m-r-20 column">
+        <view class="item-card u-m-r-20 bg-white">
+          <view class="flex justify-between u-m-b-16">
+            <view class="u-font-xl font-bold flex-1">
+              <text class="u-m-r-20">{{ '脏兵' }}</text>
+              <text class="u-m-r-20">{{ '男' }}</text>
+              <text>{{ '24 ' }}</text>
+            </view>
+            <uni-icons type="compose" color="#888" size="24" />
+          </view>
+          <u-tag text="AS急性脑卒中" type="primary" size="mini" />
+          <view class="u-tips-color u-font-sm u-p-t-20">
+            身份证：<text>1222222222</text>
+          </view>
+        </view>
+
+        <view class="item-card u-m-r-20 bg-white u-m-t-30">
+          <view class="flex justify-between u-m-b-16">
+            <view class="u-font-xl font-bold flex-1">
+              <text class="u-m-r-20">{{ '脏兵' }}</text>
+            </view>
+            <uni-icons type="compose" color="#888" size="24" />
+          </view>
+
+          <view class="flex justify-between">
+            <u-tag text="AS急性脑卒中" type="primary" size="mini" />
+            <view class="u-tips-color">距发病时间 <text class="primary">194′′</text></view>
+          </view>
+
+          <view class="u-tips-color u-font-sm u-p-t-20 flex justify-between">
+            <view>
+              身份证：<text>1222222222</text>
+            </view>
+            <view>距CT25′′剩余9′′</view>
+          </view>
+        </view>
+
+
+        <view class="item-card u-m-r-20 bg-white u-m-t-30">
+          <view class="flex justify-between u-m-b-16">
+            <view class="u-font-xl font-bold flex-1">
+              mRS评分：<text class="u-m-r-20 primary">{{ '4' }}</text>
+              NIHSS评分：<text class="u-m-r-20 primary">{{ '4' }}</text>
+            </view>
+            <uni-icons type="compose" color="#888" size="24" />
+          </view>
+
+          <view class="flex justify-between u-m-b-16">
+            <view class="u-font-xl font-bold flex-1">
+              舒张压/收缩压：<text class="u-m-r-20 primary">{{ '4' }}</text>
+            </view>
+          </view>
+
+          <u-tag text="AS急性脑卒中" type="primary" size="mini" />
+
+          <view class="u-tips-color u-font-sm u-p-t-20 flex ">
+            身高：<text class="u-m-r-20">1222222222</text>
+            体重：<text class="u-m-r-20">1222222222</text>
+            BMI：<text class="u-m-r-20">1222222222</text>
+          </view>
+
+          <view class="u-tips-color u-font-sm u-p-t-20 flex ">
+            脉搏：<text class="u-m-r-20">1222222222</text>
+          </view>
+        </view>
+      </view>
+
+
+      <!-- timeline -->
+      <view class="flex-1 item-card">
+        <u-time-line>
+          <u-time-line-item node-top="4">
+            <template v-slot:node>
+              <uni-icons type="smallcircle" color="#00C767" size="16" />
+            </template>
+            <template v-slot:content>
+              <view class="flex justify-between">
+                <text class="font-xl font-bold">分诊</text>
+                <text>结束</text>
+              </view>
+              <view class="u-m-t-20">时间</view>
+            </template>
+          </u-time-line-item>
+          <u-time-line-item node-top="4">
+            <template v-slot:node>
+              <uni-icons type="smallcircle" color="#00C767" size="16" />
+            </template>
+            <template v-slot:content>
+              <view class="flex justify-between">
+                <text class="font-xl font-bold">分诊</text>
+                <text>结束</text>
+              </view>
+              <view class="u-m-t-20">时间</view>
+            </template>
+          </u-time-line-item>
+          <u-time-line-item node-top="4">
+            <template v-slot:node>
+              <uni-icons type="smallcircle" color="#00C767" size="16" />
+            </template>
+            <template v-slot:content>
+              <view class="flex justify-between">
+                <text class="font-xl font-bold">分诊</text>
+                <text>结束</text>
+              </view>
+              <view class="u-m-t-20">时间</view>
+            </template>
+          </u-time-line-item>
+        </u-time-line>
+      </view>
+    </view>
+
+    <!-- float button -->
+    <FloatButton />
+  </view>
+</template>
+
+<script lang="ts" setup>
+function onClickLeft() {
+
+  console.log('left');
+
+}
+
+function onClickRight() {
+  uni.$u.openPage('detail2')
+}
+</script>
+
+<style lang="scss" scoped>
+.bg-main-r {
+  height: 60vh;
+
+  :deep(.uni-navbar__header-btns) {
+    width: 200rpx !important;
+  }
+
+  .icon-change {
+    width: 40rpx !important;
+    height: 40rpx !important;
+    margin-left: 0.5em;
+    opacity: .9 !important;
+  }
+
+  .item-card {
+    padding: 1em;
+    border-radius: 6px;
+    background-color: #fff;
+  }
+}
+
+
+
+.head {
+  height: 140rpx;
+  padding: 0 20px;
+}
+
+.btn-create {
+  background-color: #fff;
+  height: 3em;
+  padding: 0 3em;
+  display: flex;
+  align-items: center;
+  border-radius: 1.5em;
+
+  .icon-plus {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 0.5em;
+  }
+}
+
+.icon-doctor {
+  position: relative;
+  z-index: 0;
+  width: 140rpx;
+  height: 140rpx;
+  transform: scale(1.1) translate3d(-50%, 24%, 0);
+}
+
+.content {
+  position: relative;
+  z-index: 99;
+}
+</style>
--- a/pages/detail2/detail2.vue
+++ b/pages/detail2/detail2.vue
@ -0,0 +1,125 @@
+<template>
+  <view>
+    <uni-nav-bar left-icon="left" background-color="#fff" :border="false" title="患者详情" @clickRight="onClickRight">
+      <template v-slot:right>
+        <view class="flex nav-right">
+          切换至概览 <u-image class="icon-change" src="@/static/images/change-dark.png" mode="aspectFill"></u-image>
+        </view>
+      </template>
+    </uni-nav-bar>
+
+    <view class="flex u-m-40 u-m-r-40 align-top content">
+      <view class="flex-2 u-m-r-20 column">
+        <uni-section type="line" title="患者信息" titleFontSize="16px">
+          <template v-slot:right>
+            <view class="u-tips-color">
+              <text class="u-m-r-20">{{ '藏寨' }}</text>
+              <text class="u-m-r-20">{{ '男' }}</text>
+              <text>{{ '24' }}</text>
+            </view>
+          </template>
+        </uni-section>
+
+        <view class="item-card u-m-r-20 bg-white border-success">
+          <view class="flex">
+            <view class="flex-1">
+              <view class=" font-bold flex-1 u-tips-color u-m-b-20">
+                <text class="u-m-r-20">患者基本信息</text>
+              </view>
+              <view>
+                <u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" />
+                <u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" />
+                <u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" />
+                <u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="success" size="mini" />
+              </view>
+            </view>
+            <uni-icons type="right" color="#999" size="16" />
+          </view>
+        </view>
+
+        <view class="item-card u-m-r-20 u-m-t-30 bg-white border-primary">
+          <view class="flex">
+            <view class="flex-1">
+              <view class=" font-bold flex-1 u-tips-color u-m-b-20">
+                <text class="u-m-r-20">急救信息记录</text>
+              </view>
+              <view>
+                <u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="primary" size="mini" />
+                <u-tag class="u-m-r-20 u-m-b-12" text="AS急性脑卒中" type="primary" size="mini" />
+              </view>
+            </view>
+            <uni-icons type="right" color="#999" size="16" />
+          </view>
+        </view>
+      </view>
+
+      <!-- right -->
+      <view class="flex-3">
+        <uni-section type="line" title="患者基本信息" titleFontSize="16px"> </uni-section>
+        <DetailBase />
+      </view>
+    </view>
+
+    <!-- float button -->
+    <FloatButton />
+  </view>
+</template>
+
+<script lang="ts" setup>
+function onClickRight() {
+
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.uni-navbar__header-btns) {
+  width: 200rpx !important;
+}
+
+.icon-change {
+  width: 40rpx !important;
+  height: 40rpx !important;
+  margin-left: 0.5em;
+  opacity: .9 !important;
+}
+
+.item-card {
+  padding: 1em 1em 1em 1.2em;
+  border-radius: 20rpx;
+  background-color: #fff;
+  border-left: 10rpx solid;
+}
+
+.head {
+  height: 140rpx;
+  padding: 0 20px;
+}
+
+.btn-create {
+  background-color: #fff;
+  height: 3em;
+  padding: 0 3em;
+  display: flex;
+  align-items: center;
+  border-radius: 1.5em;
+
+  .icon-plus {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 0.5em;
+  }
+}
+
+.icon-doctor {
+  position: relative;
+  z-index: 0;
+  width: 140rpx;
+  height: 140rpx;
+  transform: scale(1.1) translate3d(-50%, 24%, 0);
+}
+
+.content {
+  position: relative;
+  z-index: 99;
+}
+</style>
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -1,29 +1,26 @@
 <template>
-	<view class="container">
-		
-		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
-		<text class="intro">详见：</text>
-		<uni-link :href="href" :text="href"></uni-link>
-	</view>
+	<u-button type="primary" hover-class="button-hover" @click="send">
+		发消息
+	</u-button>
 </template>

-<script>
-	export default {
-		data() {
-			return {
-				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
-			}
-		},
-		methods: {
+<script lang="ts" setup>
+import { onLoad } from '@dcloudio/uni-app'

-		}
-	}
-</script>
+onLoad(() => {
+
+	document.addEventListener('UniAppJSBridgeReady', () => {
+		console.log(uni);
+
+	}, false)

-<style>
-	.container {
-		padding: 20px;
-		font-size: 14px;
-		line-height: 24px;
-	}
-</style>
+})
+
+function send() {
+
+	window.postMessage('hello', '*')
+	// uni.postMessage({
+	// 	data: { action: "msg ok" }
+	// })
+}
+</script>
--- a/pages/loading/loading.vue
+++ b/pages/loading/loading.vue
@ -0,0 +1,101 @@
+<template>
+  <view class="relative column align-center justify-center full-height bg-white">
+    <u-button class="last-time" shape="circle" size="mini" :plain="true" @click="openPage('patient-list')">
+      跳过 {{ leftTime }}
+    </u-button>
+
+    <image class="loading-img" src="@/static/images/loading-img.png" mode="scaleToFill" />
+
+    <u-button class="bg-main u-m-t-50 btn-create" shape="circle" type="primary" @click="handleCreate">创建患者</u-button>
+
+    <uni-popup ref="popupRef" background-color="transparent">
+      <CreatePatient @on-scan="uploadImage" @on-cancel="onCancel" @on-confirm="onConfirm" />
+    </uni-popup>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const leftTime = ref(6)
+const popupRef = ref()
+let timer: number | undefined
+
+function init() {
+  const localFirst = uni.getStorageSync(uni.$u.LOCAL_KEY.LOADED)
+  if (localFirst) {
+    openPage('patient-list')
+    return
+  }
+
+  uni.setStorageSync(uni.$u.LOCAL_KEY.LOADED, 'true')
+
+  timer = setInterval(() => {
+    if (leftTime.value === 0) {
+      clearInterval(timer)
+      timer = undefined
+      openPage('patient-list')
+      return
+    }
+    leftTime.value -= 1
+  }, 1000)
+}
+
+// 创建患者
+function handleCreate() {
+  if (timer) {
+    clearInterval(timer)
+    timer = undefined
+  }
+  popupRef.value.open()
+}
+
+
+function uploadImage() {
+  uni.chooseImage({
+    count: 1,
+    sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
+    sourceType: ['album', 'camera'], //从相册选择
+    success: function (res) {
+      console.log(JSON.stringify(res.tempFilePaths));
+    }
+  });
+}
+
+function onCancel() {
+  popupRef.value.close()
+}
+
+function onConfirm() {
+  // TODO: 提交
+  openPage('detail1')
+
+  onCancel()
+}
+
+// 打开页面
+function openPage(name) {
+  uni.$u.openPage(name, true)
+}
+
+init()
+</script>
+
+<style lang="scss" scoped>
+.last-time {
+  position: absolute;
+  right: 48rpx;
+  top: 68rpx;
+}
+
+.loading-img {
+  width: 196*3rpx;
+  height: 215*3rpx;
+  margin-bottom: 50rpx;
+}
+
+.btn-create {
+  width: 560rpx;
+  height: 100rpx;
+}
+</style>
--- a/pages/patient-list/patient-list.vue
+++ b/pages/patient-list/patient-list.vue
@ -0,0 +1,94 @@
+<template>
+  <view class="u-p-40">
+    <SearchList />
+
+    <uni-section title="患者列表" type="line" class="uni-my-5" titleFontSize="16px"></uni-section>
+    <uni-grid :column="4" :highlight="true" :square="false" :show-border="false" @change="onClickItem">
+      <uni-grid-item v-for="(item, index) in data" :index="index" :key="index" class="u-p-20">
+        <view class="list-item flex">
+          <view class="flex-1">
+            <view class="text-title">
+              <text>{{ item.name }}</text>
+              <text>{{ item.age }}</text>
+              <text>{{ item.sex }}</text>
+            </view>
+            <view class="text-summary">
+              <u-tag :text="item.status" mode="light" size="mini" />
+              <text class="time">{{ item.time }}</text>
+            </view>
+          </view>
+
+          <view>
+            <uni-icons type="forward" size="12"></uni-icons>
+          </view>
+        </view>
+      </uni-grid-item>
+    </uni-grid>
+
+    <image class="create-user" src="@/static/images/create-user.png" mode="scaleToFill" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { IPatient } from '@/store/modules/service';
+import { useServiceStore } from '@/store/modules/service';
+
+const serviceStore = useServiceStore()
+
+const data: IPatient[] = [
+  { name: '脏兵', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵1', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵2', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵3', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵4', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵1', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵2', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+  { name: '脏兵3', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
+]
+
+function onClickItem(event) {
+  const item = data[event.detail.index]
+  serviceStore.setCurrentPatient(item)
+  uni.$u.openPage('detail1')
+
+}
+</script>
+
+<style lang="scss" scoped>
+.list-item {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 1.5em 1em;
+  margin-right: 1.2em;
+
+  .text-title {
+    font-size: 15px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 0.6em;
+
+    text {
+      margin-right: 1em;
+    }
+  }
+
+  .text-summary {
+    color: #888;
+    font-size: 13px;
+
+    .time {
+      margin-left: 1em;
+    }
+  }
+}
+
+.create-user {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 120rpx;
+  height: 120rpx;
+}
+</style>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/static/c1.png
+++ b/static/c1.png
--- a/static/c2.png
+++ b/static/c2.png
--- a/static/c3.png
+++ b/static/c3.png
--- a/static/c4.png
+++ b/static/c4.png
--- a/static/c5.png
+++ b/static/c5.png
--- a/static/c6.png
+++ b/static/c6.png
--- a/static/c7.png
+++ b/static/c7.png
--- a/static/c8.png
+++ b/static/c8.png
--- a/static/c9.png
+++ b/static/c9.png
--- a/static/customicons.css
+++ b/static/customicons.css
@ -1,20 +0,0 @@
-@font-face {
-  font-family: "customicons"; /* Project id 2878519 */
-  src:url('/static/customicons.ttf') format('truetype');
-}
-
-.customicons {
-  font-family: "customicons" !important;
-}
-
-.youxi:before {
-  content: "\e60e";
-}
-
-.wenjian:before {
-  content: "\e60f";
-}
-
-.zhuanfa:before {
-  content: "\e610";
-}
--- a/static/customicons.ttf
+++ b/static/customicons.ttf
--- a/static/images/bed.png
+++ b/static/images/bed.png
--- a/static/images/car.png
+++ b/static/images/car.png
--- a/static/images/change-dark.png
+++ b/static/images/change-dark.png
--- a/static/images/change.png
+++ b/static/images/change.png
--- a/static/images/create-user.png
+++ b/static/images/create-user.png
--- a/static/images/doctor.png
+++ b/static/images/doctor.png
--- a/static/images/heart.png
+++ b/static/images/heart.png
--- a/static/images/loading-img.png
+++ b/static/images/loading-img.png
--- a/static/images/menu.png
+++ b/static/images/menu.png
--- a/static/images/plus.png
+++ b/static/images/plus.png
--- a/static/images/user.png
+++ b/static/images/user.png
--- a/store/modules/service.ts
+++ b/store/modules/service.ts
@ -3,74 +3,31 @@ import type { ICarPerson, IListItem, IOutCheckArea, IPicArea } from '@/types/ser
 import { defineStore } from 'pinia'
 import { store } from '@/store'

-interface ServiceState {
-  currentOutCheckArea: null | IOutCheckArea
-  currentCar: null | IListItem
-  currentCarPerson: null | ICarPerson
-  jcxdh: string
-  currentPicArea: IPicArea | null
-  kssj: string
-  checkedOk: boolean
-  wgjykssj: string
+export interface IPatient {
+  name: string
+  gender?: number
+  idCard?: string
+  status?: string
+  age?: number
+  sex?: string
+  time?: string
+}
+
+export interface ServiceState {
+  currentPatient: null | IPatient
 }

 export const useServiceStore = defineStore({
  id: 'service',
  state: (): ServiceState => ({
-    currentOutCheckArea: null, // 当前选中的外检区域
-    currentCar: null, // 当前车辆信息
-    currentCarPerson: null, // 当前引车员
-    jcxdh: '', // 检测线代号
-    currentPicArea: null,
-    kssj: '', // 开始时间
-    checkedOk: true, // 检验是否有不合格的
-    wgjykssj: '', // 外观检验开始时间
+    currentPatient: null,
  }),

-  getters: {
-    // 获取检测机构编码
-    getCurrentCheckAreaCode({ currentOutCheckArea }) {
-      return currentOutCheckArea?.wjqbh || ''
-    },
-  },
+  getters: {},

  actions: {
-    setWgjykssj(time: string) {
-      this.wgjykssj = time
-    },
-
-    setCheckOK(isOk: boolean) {
-      this.checkedOk = isOk
-    },
-
-    // 设置开始时间
-    setKssj(time: string) {
-      this.kssj = time
-    },
-
-    // 设置检测线代号
-    setJcxdh(jcxdh: string) {
-      this.jcxdh = jcxdh
-    },
-
-    // 设置当前选中的外检区域
-    setCurrentOutCheckArea(item: IOutCheckArea) {
-      this.currentOutCheckArea = item || null
-    },
-
-    // 设置当前选中的外检区域
-    setCurrentCarPerson(item: ICarPerson) {
-      this.currentCarPerson = item || null
-    },
-
-    // 设置当前的车辆信息
-    setCurrentCar(carItem: IListItem) {
-      this.currentCar = carItem || null
-    },
-
-    // 设置当前整车拍照检验区域
-    setCurrentPicArea(picArea: IPicArea) {
-      this.currentPicArea = picArea || null
+    setCurrentPatient(patient: IPatient) {
+      this.currentPatient = patient
    },
  },
 })
--- a/tsconfig.json
+++ b/tsconfig.json
--- a/uni-webview-js.js
+++ b/uni-webview-js.js
@ -0,0 +1,207 @@
+!(function (e, n) {
+  'object' == typeof exports && 'undefined' != typeof module
+    ? (module.exports = n())
+    : 'function' == typeof define && define.amd
+    ? define(n)
+    : ((e = e || self).uni = n())
+})(this, function () {
+  'use strict'
+  try {
+    var e = {}
+    Object.defineProperty(e, 'passive', {
+      get: function () {
+        !0
+      },
+    }),
+      window.addEventListener('test-passive', null, e)
+  } catch (e) {}
+  var n = Object.prototype.hasOwnProperty
+  function i(e, i) {
+    return n.call(e, i)
+  }
+  var t = []
+  function r() {
+    return window.__dcloud_weex_postMessage || window.__dcloud_weex_
+  }
+  var o = function (e, n) {
+      var i = { options: { timestamp: +new Date() }, name: e, arg: n }
+      if (r()) {
+        if ('postMessage' === e) {
+          var o = { data: [n] }
+          return window.__dcloud_weex_postMessage
+            ? window.__dcloud_weex_postMessage(o)
+            : window.__dcloud_weex_.postMessage(JSON.stringify(o))
+        }
+        var a = { type: 'WEB_INVOKE_APPSERVICE', args: { data: i, webviewIds: t } }
+        window.__dcloud_weex_postMessage
+          ? window.__dcloud_weex_postMessageToService(a)
+          : window.__dcloud_weex_.postMessageToService(JSON.stringify(a))
+      }
+      if (!window.plus) return window.parent.postMessage({ type: 'WEB_INVOKE_APPSERVICE', data: i, pageId: '' }, '*')
+      if (0 === t.length) {
+        var d = plus.webview.currentWebview()
+        if (!d) throw new Error('plus.webview.currentWebview() is undefined')
+        var s = d.parent(),
+          w = ''
+        ;(w = s ? s.id : d.id), t.push(w)
+      }
+      if (plus.webview.getWebviewById('__uniapp__service'))
+        plus.webview.postMessageToUniNView({ type: 'WEB_INVOKE_APPSERVICE', args: { data: i, webviewIds: t } }, '__uniapp__service')
+      else {
+        var u = JSON.stringify(i)
+        plus.webview
+          .getLaunchWebview()
+          .evalJS('UniPlusBridge.subscribeHandler("'.concat('WEB_INVOKE_APPSERVICE', '",').concat(u, ',').concat(JSON.stringify(t), ');'))
+      }
+    },
+    a = {
+      navigateTo: function () {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = e.url
+        o('navigateTo', { url: encodeURI(n) })
+      },
+      navigateBack: function () {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = e.delta
+        o('navigateBack', { delta: parseInt(n) || 1 })
+      },
+      switchTab: function () {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = e.url
+        o('switchTab', { url: encodeURI(n) })
+      },
+      reLaunch: function () {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = e.url
+        o('reLaunch', { url: encodeURI(n) })
+      },
+      redirectTo: function () {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = e.url
+        o('redirectTo', { url: encodeURI(n) })
+      },
+      getEnv: function (e) {
+        r() ? e({ nvue: !0 }) : window.plus ? e({ plus: !0 }) : e({ h5: !0 })
+      },
+      postMessage: function () {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}
+        o('postMessage', e.data || {})
+      },
+    },
+    d = /uni-app/i.test(navigator.userAgent),
+    s = /Html5Plus/i.test(navigator.userAgent),
+    w = /complete|loaded|interactive/
+  var u = window.my && navigator.userAgent.indexOf(['t', 'n', 'e', 'i', 'l', 'C', 'y', 'a', 'p', 'i', 'l', 'A'].reverse().join('')) > -1
+  var g = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent)
+  var v = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent)
+  var c = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent)
+  var m = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent)
+  var p = window.qa && /quickapp/i.test(navigator.userAgent)
+  var f = window.ks && window.ks.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent)
+  var l = window.tt && window.tt.miniProgram && /Lark|Feishu/i.test(navigator.userAgent)
+  var _ = window.jd && window.jd.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent)
+  var E = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent)
+  for (
+    var h,
+      P = function () {
+        ;(window.UniAppJSBridge = !0), document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', { bubbles: !0, cancelable: !0 }))
+      },
+      b = [
+        function (e) {
+          if (d || s)
+            return (
+              window.__dcloud_weex_postMessage || window.__dcloud_weex_
+                ? document.addEventListener('DOMContentLoaded', e)
+                : window.plus && w.test(document.readyState)
+                ? setTimeout(e, 0)
+                : document.addEventListener('plusready', e),
+              a
+            )
+        },
+        function (e) {
+          if (m)
+            return (
+              window.WeixinJSBridge && window.WeixinJSBridge.invoke
+                ? setTimeout(e, 0)
+                : document.addEventListener('WeixinJSBridgeReady', e),
+              window.wx.miniProgram
+            )
+        },
+        function (e) {
+          if (v)
+            return (
+              window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QQJSBridgeReady', e),
+              window.qq.miniProgram
+            )
+        },
+        function (e) {
+          if (u) {
+            document.addEventListener('DOMContentLoaded', e)
+            var n = window.my
+            return {
+              navigateTo: n.navigateTo,
+              navigateBack: n.navigateBack,
+              switchTab: n.switchTab,
+              reLaunch: n.reLaunch,
+              redirectTo: n.redirectTo,
+              postMessage: n.postMessage,
+              getEnv: n.getEnv,
+            }
+          }
+        },
+        function (e) {
+          if (g) return document.addEventListener('DOMContentLoaded', e), window.swan.webView
+        },
+        function (e) {
+          if (c) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram
+        },
+        function (e) {
+          if (p) {
+            window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QaJSBridgeReady', e)
+            var n = window.qa
+            return {
+              navigateTo: n.navigateTo,
+              navigateBack: n.navigateBack,
+              switchTab: n.switchTab,
+              reLaunch: n.reLaunch,
+              redirectTo: n.redirectTo,
+              postMessage: n.postMessage,
+              getEnv: n.getEnv,
+            }
+          }
+        },
+        function (e) {
+          if (f)
+            return (
+              window.WeixinJSBridge && window.WeixinJSBridge.invoke
+                ? setTimeout(e, 0)
+                : document.addEventListener('WeixinJSBridgeReady', e),
+              window.ks.miniProgram
+            )
+        },
+        function (e) {
+          if (l) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram
+        },
+        function (e) {
+          if (_)
+            return (
+              window.JDJSBridgeReady && window.JDJSBridgeReady.invoke ? setTimeout(e, 0) : document.addEventListener('JDJSBridgeReady', e),
+              window.jd.miniProgram
+            )
+        },
+        function (e) {
+          if (E) return window.xhs.miniProgram
+        },
+        function (e) {
+          return document.addEventListener('DOMContentLoaded', e), a
+        },
+      ],
+      y = 0;
+    y < b.length && !(h = b[y](P));
+    y++
+  );
+  h || (h = {})
+  var B = 'undefined' != typeof uni ? uni : {}
+  if (!B.navigateTo) for (var S in h) i(h, S) && (B[S] = h[S])
+  return (B.webView = h), B
+})
--- a/uni.scss
+++ b/uni.scss
@ -1,23 +1,73 @@
@import '@/uni_modules/uni-scss/variables.scss';
@import '@/uni_modules/vk-uview-ui/theme.scss';

+$u-type-success: #1bb299;
+
+.bg-main {
+  background: linear-gradient(136deg, #7bc0ff 7%, #4d88ff 92%);
+}
+.bg-main-v {
+  background: linear-gradient(180deg, #7bc0ff, #4d88ff);
+}
+
+.bg-main-r {
+  background: linear-gradient(180deg, #4f8bff, rgba(44, 110, 183, 0));
+}
+
+.border-radius-9-up {
+  border-radius: 18rpx 18rpx 0 0;
+}
+
+.border-radius-9-down {
+  border-radius: 0 0 18rpx 18rpx;
+}
+
+.border-radius-6 {
+  border-radius: 12rpx;
+}
+
+.border-success {
+  border-color: $u-type-success !important;
+}
+
+.border-primary {
+  border-color: $u-type-primary !important;
+}
+
 .u-column,
+.column,
 .flex-column {
  display: flex;
  flex-direction: column;
 }
+.flex {
+  display: flex;
+  align-items: center;
+}
 .flex-1 {
  flex: 1;
 }
+.flex-2 {
+  flex: 2;
+}
+.flex-3 {
+  flex: 3;
+}
 .justify-space-around {
  justify-content: space-around;
 }
 .justify-between {
  justify-content: space-between;
 }
+.justify-center {
+  justify-content: center;
+}
 .justify-end {
  justify-content: end;
 }
+.align-top {
+  align-items: flex-start !important;
+}
 .align-center {
  align-items: center;
 }
@ -30,6 +80,9 @@
 .green {
  color: $u-type-success;
 }
+.primary {
+  color: $u-type-primary;
+}

 .mt-20 {
  margin-top: 20rpx;
@ -68,6 +121,12 @@
 .bg-white {
  background-color: #fff;
 }
+.text-white {
+  color: #fff;
+}
+.font-bold {
+  font-weight: bold;
+}

 .relative {
  position: relative;
@ -79,3 +138,6 @@
 .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner {
  border-color: #2979ff !important;
 }
+.uni-section .uni-section-header__content .distraction {
+  font-weight: bold;
+}
--- a/uni_modules/uni-section/components/uni-section/uni-section.vue
+++ b/uni_modules/uni-section/components/uni-section/uni-section.vue
@ -1,167 +1,172 @@
 <template>
-	<view class="uni-section">
-		<view class="uni-section-header" @click="onClick">
-				<view class="uni-section-header__decoration" v-if="type" :class="type" />
-        <slot v-else name="decoration"></slot>
-
-        <view class="uni-section-header__content">
-          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
-          <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
-        </view>
-
-        <view class="uni-section-header__slot-right">
-          <slot name="right"></slot>
-        </view>
-		</view>
-
-		<view class="uni-section-content" :style="{padding: _padding}">
-			<slot />
-		</view>
-	</view>
+  <view class="uni-section">
+    <view class="uni-section-header" @click="onClick">
+      <view class="uni-section-header__decoration" v-if="type" :class="type" />
+      <slot v-else name="decoration"></slot>
+
+      <view class="uni-section-header__content">
+        <text :style="{ 'font-size': titleFontSize, 'color': titleColor }" class="uni-section__content-title"
+              :class="{ 'distraction': !subTitle }">{{ title }}</text>
+        <text v-if="subTitle" :style="{ 'font-size': subTitleFontSize, 'color': subTitleColor }"
+              class="uni-section-header__content-sub">{{ subTitle }}</text>
+      </view>
+
+      <view class="uni-section-header__slot-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+
+    <view class="uni-section-content" :style="{ padding: _padding }">
+      <slot />
+    </view>
+  </view>
 </template>

 <script>

-	/**
-	 * Section 标题栏
-	 * @description 标题栏
-	 * @property {String} type = [line|circle|square] 标题装饰类型
-	 * 	@value line 竖线
-	 * 	@value circle 圆形
-	 * 	@value square 正方形
-	 * @property {String} title 主标题
-	 * @property {String} titleFontSize 主标题字体大小
-	 * @property {String} titleColor 主标题字体颜色
-	 * @property {String} subTitle 副标题
-	 * @property {String} subTitleFontSize 副标题字体大小
-	 * @property {String} subTitleColor 副标题字体颜色
-	 * @property {String} padding 默认插槽 padding
-	 */
-
-	export default {
-		name: 'UniSection',
-    emits:['click'],
-		props: {
-			type: {
-				type: String,
-				default: ''
-			},
-			title: {
-				type: String,
-				required: true,
-				default: ''
-			},
-      titleFontSize: {
-        type: String,
-        default: '14px'
-      },
-			titleColor:{
-				type: String,
-				default: '#333'
-			},
-			subTitle: {
-				type: String,
-				default: ''
-			},
-      subTitleFontSize: {
-        type: String,
-        default: '12px'
-      },
-      subTitleColor: {
-        type: String,
-        default: '#999'
-      },
-			padding: {
-				type: [Boolean, String],
-				default: false
-			}
-		},
-    computed:{
-      _padding(){
-        if(typeof this.padding === 'string'){
-          return this.padding
-        }
-
-        return this.padding?'10px':''
-      }
+/**
+ * Section 标题栏
+ * @description 标题栏
+ * @property {String} type = [line|circle|square] 标题装饰类型
+ * 	@value line 竖线
+ * 	@value circle 圆形
+ * 	@value square 正方形
+ * @property {String} title 主标题
+ * @property {String} titleFontSize 主标题字体大小
+ * @property {String} titleColor 主标题字体颜色
+ * @property {String} subTitle 副标题
+ * @property {String} subTitleFontSize 副标题字体大小
+ * @property {String} subTitleColor 副标题字体颜色
+ * @property {String} padding 默认插槽 padding
+ */
+
+export default {
+  name: 'UniSection',
+  emits: ['click'],
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    titleFontSize: {
+      type: String,
+      default: '14px'
+    },
+    titleColor: {
+      type: String,
+      default: '#333'
    },
-		watch: {
-			title(newVal) {
-				if (uni.report && newVal !== '') {
-					uni.report('title', newVal)
-				}
-			}
-		},
-    methods: {
-			onClick() {
-				this.$emit('click')
-			}
-		}
-	}
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    subTitleFontSize: {
+      type: String,
+      default: '12px'
+    },
+    subTitleColor: {
+      type: String,
+      default: '#999'
+    },
+    padding: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  computed: {
+    _padding() {
+      if (typeof this.padding === 'string') {
+        return this.padding
+      }
+
+      return this.padding ? '10px' : ''
+    }
+  },
+  watch: {
+    title(newVal) {
+      if (uni.report && newVal !== '') {
+        uni.report('title', newVal)
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click')
+    }
+  }
+}
 </script>
 <style lang="scss" >
-	$uni-primary: #2979ff !default;
+$uni-primary: linear-gradient(180deg, #7bc0ff, #4d88ff);
+
+.uni-section {
+  background-color: transparent;
+
+  .uni-section-header {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    padding: 12px 10px;
+    font-weight: normal;
+
+    &__decoration {
+      margin-right: 6px;
+      background: $uni-primary;
+
+      &.line {
+        width: 6px;
+        height: 14px;
+        border-radius: 10px;
+      }

-	.uni-section {
-		background-color: #fff;
-    .uni-section-header {
-      position: relative;
+      &.circle {
+        width: 8px;
+        height: 8px;
+        border-top-right-radius: 50px;
+        border-top-left-radius: 50px;
+        border-bottom-left-radius: 50px;
+        border-bottom-right-radius: 50px;
+      }
+
+      &.square {
+        width: 8px;
+        height: 8px;
+      }
+    }
+
+    &__content {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
-      flex-direction: row;
-      align-items: center;
-      padding: 12px 10px;
-      font-weight: normal;
-
-      &__decoration{
-        margin-right: 6px;
-        background-color: $uni-primary;
-        &.line {
-          width: 4px;
-          height: 12px;
-          border-radius: 10px;
-        }
-
-        &.circle {
-          width: 8px;
-          height: 8px;
-          border-top-right-radius: 50px;
-          border-top-left-radius: 50px;
-          border-bottom-left-radius: 50px;
-          border-bottom-right-radius: 50px;
-        }
-
-        &.square {
-          width: 8px;
-          height: 8px;
-        }
-      }
+      flex-direction: column;
+      flex: 1;
+      color: #333;

-      &__content {
-        /* #ifndef APP-NVUE */
-        display: flex;
-        /* #endif */
-        flex-direction: column;
-        flex: 1;
-        color: #333;
-
-        .distraction {
-          flex-direction: row;
-          align-items: center;
-        }
-        &-sub {
-          margin-top: 2px;
-        }
+      .distraction {
+        flex-direction: row;
+        align-items: center;
      }

-      &__slot-right{
-        font-size: 14px;
+      &-sub {
+        margin-top: 2px;
      }
    }

-    .uni-section-content{
+    &__slot-right {
      font-size: 14px;
    }
-	}
+  }
+
+  .uni-section-content {
+    font-size: 14px;
+  }
+}
 </style>
--- a/utils/common.ts
+++ b/utils/common.ts
@ -0,0 +1,14 @@
+/**
+ * 打开页面
+ * @param {string} pageName 页面的名称 同文件名 文件夹名
+ * @param {boolean} isRedirect 是否是重定向 替换模式
+ * @param {string} query 查询参数 不带? 如 name=wally&age=17
+ */
+export function openPage(pageName: string, isRedirect = false, query?: string) {
+  const path = query ? `/pages/${pageName}/${pageName}?${query}` : `/pages/${pageName}/${pageName}`
+  if (isRedirect) {
+    uni.redirectTo({ url: path })
+  } else {
+    uni.navigateTo({ url: path })
+  }
+}