From 271f768b4766f70160de6272247d183e33f21de1 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期四, 22 九月 2022 16:00:22 +0800
Subject: [PATCH] up
---
src/views/myMine/imgs/serve3.png | 0
src/views/myMine/imgs/serve1.png | 0
src/views/myMine/imgs/serve5.png | 0
src/views/test.vue | 24 ++
src/main.ts | 4
src/views/home/index.vue | 229 ++++++++++++------------
src/views/myMine/imgs/serve2.png | 0
index.html | 2
src/views/home/assets/index.scss | 16 -
src/router/index.ts | 1
src/views/myMine/index.vue | 222 ++++++++++++++++++++++++
src/App.vue | 18 -
src/views/myMine/imgs/serve4.png | 0
13 files changed, 374 insertions(+), 142 deletions(-)
diff --git a/index.html b/index.html
index 725fae4..ce19fbc 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite App</title>
+ <title>胜透服务</title>
</head>
<body>
<div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index de08e0c..6dda6cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,23 +10,7 @@
<style scoped lang="scss">
.app-view {
-}
-
-::-webkit-scrollbar {
- width: 4px;
- height: 6px;
- background-color: rgba(255, 255, 255, 0.7);
-}
-
-/* 滚动条 */
-::-webkit-scrollbar-thumb {
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background: #ababab;
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
- background-color: #ababab;
+ display: grid;
}
</style>
diff --git a/src/main.ts b/src/main.ts
index bcd00ab..999fddf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@
// import 'vant/es/toast/style'
// 引入全局样式
import 'vant/lib/index.css'
-import { Col, Row } from 'vant'
+import { Col, Row,Icon,Button } from 'vant'
import { createPinia } from 'pinia'
// mock数据
// import './utils/mock'
@@ -13,6 +13,8 @@
const app = createApp(App as any)
app.use(Col)
app.use(Row)
+app.use(Icon)
+app.use(Button)
app.use(router)
app.use(createPinia())
app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index 97e29bb..386fc58 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@
const routes: Array<RouteRecordRaw> = [
{ path: '/', name: 'Home', component: () => import('views/home/index.vue')},
+ { path: '/my', name: 'myMine', component: () => import('views/myMine/index.vue')},
{ path: '/test', name: 'Test', component: () => import('views/test.vue')}
]
diff --git a/src/views/home/assets/index.scss b/src/views/home/assets/index.scss
index d93a35e..13e5a46 100644
--- a/src/views/home/assets/index.scss
+++ b/src/views/home/assets/index.scss
@@ -1,15 +1,13 @@
-.parent {
- display: grid;
- place-items: center;
- .page{
- background-color: #F6FAFF;
- position:relative;
- min-width: 375px;
-
- }
+
+.page{
+ background-color: #F6FAFF;
+ position:relative;
+ min-width: 375px;
+
}
+
.box_1 {
background: url(./home2.png)
100% no-repeat;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e3e4117..82b34d1 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,126 +1,124 @@
<template>
- <div class="parent">
- <div class="page">
- <div class="box_1">
- <div class="userinfo">
- <div class="name">张三丰</div>
- <div class="userCode">卡号：202324224242 </div>
- <div class="userQRcode">
- <img
- style=" width: 60px;height: 60px;margin-left: 8%; margin-top: 20px;"
- referrerpolicy="no-referrer"
- src="@/views/home/assets/img/SketchPng011ef35b32ef075413b756766208370cde43357dffc3333d2acf29b70793c15d.png"
- />
- </div>
- </div>
- <div class="userHead">
- <van-image
- round
- width="78px"
- height="78px"
- src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+ <div class="page">
+ <div class="box_1">
+ <div class="userinfo">
+ <div class="name">张三丰</div>
+ <div class="userCode">卡号：202324224242 </div>
+ <div class="userQRcode">
+ <img
+ style=" width: 60px;height: 60px;margin-left: 8%; margin-top: 20px;"
+ referrerpolicy="no-referrer"
+ src="@/views/home/assets/img/SketchPng011ef35b32ef075413b756766208370cde43357dffc3333d2acf29b70793c15d.png"
/>
</div>
- <div class="meuns">
- <van-row class="meunsitems">
- <van-col span="6" class="item">
- <van-image
- round
- width="42px"
- height="42px"
- :src="meun1"
- />
- <div>检验报告</div>
- </van-col>
- <van-col span="6" class="item">
- <van-image
- round
- width="42px"
- height="42px"
- :src="meun2"
- />
- <div>透析排班</div>
- </van-col>
- <van-col span="6" class="item">
- <van-image
- round
- width="42px"
- height="42px"
- :src="meun3"
- />
- <div>透析医嘱</div>
- </van-col>
- <van-col span="6" class="item">
- <van-image
- round
- width="42px"
- height="42px"
- :src="meun4"
- />
- <div>透析记录</div>
- </van-col>
- </van-row>
- </div>
</div>
- <div class="viewInfo">
- <div class="box">
- <div class="crainfo">
- <div class="tizhong">86</div>
- </div>
- <div class="hanzhi">体重(kg)</div>
- <div class="yinyu">Patient weight data</div>
- </div>
- <div class="box">
- <div class="crainfo">
- <div class="xueya">138/88</div>
- </div>
- <div class="hanzhi">血压(mmHg)</div>
- <div class="yinyu">Patient blood pressure data</div>
- </div>
+ <div class="userHead">
+ <van-image
+ round
+ width="78px"
+ height="78px"
+ src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+ />
</div>
- <div class="listInfos">
- <div class="listrow">
- <div class="rowioc" contenteditable>
+ <div class="meuns">
+ <van-row class="meunsitems">
+ <van-col span="6" class="item">
<van-image
- width="24px"
- height="24px"
- :src="List1"
+ round
+ width="42px"
+ height="42px"
+ :src="meun1"
/>
- </div>
- <div class="rowtext" contenteditable>
- <div class="rowb">健康趋势</div>
- <div class="rowc">Health trends</div>
- </div>
- <div class="rowiocback" contenteditable>
+ <div>检验报告</div>
+ </van-col>
+ <van-col span="6" class="item">
<van-image
- :src="Black"
+ round
+ width="42px"
+ height="42px"
+ :src="meun2"
/>
- </div>
- </div>
- <div class="listrow">
- <div class="rowioc" contenteditable>
+ <div>透析排班</div>
+ </van-col>
+ <van-col span="6" class="item">
<van-image
- width="24px"
- height="24px"
- :src="List1"
+ round
+ width="42px"
+ height="42px"
+ :src="meun3"
/>
- </div>
- <div class="rowtext" contenteditable>
- <div class="rowb">健康趋势</div>
- <div class="rowc">Health trends</div>
- </div>
- <div class="rowiocback" contenteditable>
+ <div>透析医嘱</div>
+ </van-col>
+ <van-col span="6" class="item">
<van-image
- :src="Black"
+ round
+ width="42px"
+ height="42px"
+ :src="meun4"
/>
- </div>
- </div>
+ <div>透析记录</div>
+ </van-col>
+ </van-row>
</div>
- <van-tabbar v-model="active" @change="tabChang">
- <van-tabbar-item name="home" @click="active = 'home'" icon="home-o">首页</van-tabbar-item>
- <van-tabbar-item name="mydo" @click="active = 'mydo'" icon="manager">我的</van-tabbar-item>
- </van-tabbar>
</div>
+ <div class="viewInfo">
+ <div class="box">
+ <div class="crainfo">
+ <div class="tizhong">86</div>
+ </div>
+ <div class="hanzhi">体重(kg)</div>
+ <div class="yinyu">Patient weight data</div>
+ </div>
+ <div class="box">
+ <div class="crainfo">
+ <div class="xueya">138/88</div>
+ </div>
+ <div class="hanzhi">血压(mmHg)</div>
+ <div class="yinyu">Patient blood pressure data</div>
+ </div>
+ </div>
+ <div class="listInfos">
+ <div class="listrow">
+ <div class="rowioc" contenteditable>
+ <van-image
+ width="24px"
+ height="24px"
+ :src="List1"
+ />
+ </div>
+ <div class="rowtext" contenteditable>
+ <div class="rowb">健康趋势</div>
+ <div class="rowc">Health trends</div>
+ </div>
+ <div class="rowiocback" contenteditable>
+ <van-image
+ :src="Black"
+ />
+ </div>
+ </div>
+ <div class="listrow">
+ <div class="rowioc" contenteditable>
+ <van-image
+ width="24px"
+ height="24px"
+ :src="List1"
+ />
+ </div>
+ <div class="rowtext" contenteditable>
+ <div class="rowb">健康趋势</div>
+ <div class="rowc">Health trends</div>
+ </div>
+ <div class="rowiocback" contenteditable>
+ <van-image
+ :src="Black"
+ />
+ </div>
+ </div>
+ </div>
+ <van-tabbar v-model="active" route @change="tabChang">
+ <van-tabbar-item name="home" @click="active = 'home'" icon="home-o">首页</van-tabbar-item>
+ <van-tabbar-item name="mydo" @click="active = 'mydo'" icon="manager">我的</van-tabbar-item>
+ </van-tabbar>
</div>
</template>
<script lang="ts" setup>
@@ -128,14 +126,15 @@
import { ajaxGet } from '@/utils/axios'
// import { useCounterStore } from '@/stores/counter'
import { Image as VanImage,Tabbar as VanTabbar , TabbarItem as VanTabbarItem} from 'vant'
- import {useRoute} from 'vue-router'
+ import {useRoute,useRouter} from 'vue-router'
import meun1 from './assets/meun1.png'
import meun2 from './assets/meun2.png'
import meun3 from './assets/meun3.png'
import meun4 from './assets/meun4.png'
import List1 from './assets/row1.png'
import Black from './assets/Black.png'
- const router = useRoute()
+ const route = useRoute()
+ const router=useRouter()
// const counter = useCounterStore()
const loopData0= [
{
@@ -176,11 +175,15 @@
]
const active=ref('home')
const tabChang=(index:any)=>{
- console.log(index)
+ if (index==='home'){
+ router.push('/')
+ } else {
+ router.push('my')
+ }
}
onMounted(() => {
- console.log('初始化',router)
- const queryInfo=router.query
+ console.log('初始化',route)
+ const queryInfo=route.query
const {code}=queryInfo
console.log(code)
if (code){
diff --git a/src/views/myMine/imgs/serve1.png b/src/views/myMine/imgs/serve1.png
new file mode 100644
index 0000000..1b67c2c
--- /dev/null
+++ b/src/views/myMine/imgs/serve1.png
Binary files differ
diff --git a/src/views/myMine/imgs/serve2.png b/src/views/myMine/imgs/serve2.png
new file mode 100644
index 0000000..6c20c43
--- /dev/null
+++ b/src/views/myMine/imgs/serve2.png
Binary files differ
diff --git a/src/views/myMine/imgs/serve3.png b/src/views/myMine/imgs/serve3.png
new file mode 100644
index 0000000..8d23563
--- /dev/null
+++ b/src/views/myMine/imgs/serve3.png
Binary files differ
diff --git a/src/views/myMine/imgs/serve4.png b/src/views/myMine/imgs/serve4.png
new file mode 100644
index 0000000..c806f7e
--- /dev/null
+++ b/src/views/myMine/imgs/serve4.png
Binary files differ
diff --git a/src/views/myMine/imgs/serve5.png b/src/views/myMine/imgs/serve5.png
new file mode 100644
index 0000000..dfbada8
--- /dev/null
+++ b/src/views/myMine/imgs/serve5.png
Binary files differ
diff --git a/src/views/myMine/index.vue b/src/views/myMine/index.vue
new file mode 100644
index 0000000..110bfed
--- /dev/null
+++ b/src/views/myMine/index.vue
@@ -0,0 +1,222 @@
+<template>
+ <div class="page">
+ <div class="hader">
+ <van-row>
+ <van-col span="12">
+ <van-image
+ round
+ width="50px"
+ height="50px"
+ src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+ />
+ </van-col>
+ <van-col span="12" class="hader-regth">
+ 账号管理员
+ <van-icon name="arrow" />
+ </van-col>
+ </van-row>
+ </div>
+ <div class="userInfo">
+ <van-row style="padding-left: 20px;">
+ <van-col span="16" class="info16">
+ <div class="div1">张三丰
+ <span class="but">排班提醒</span>
+ </div>
+ <div class="div2">患者卡号</div>
+ <div class="div3">000000001</div>
+ </van-col>
+ <van-col span="8" class="info8">
+ <div class="img">
+ <img
+ style=" width: 50px;height: 50px;margin-left: 8%; margin-top: 22px;"
+ referrerpolicy="no-referrer"
+ src="@/views/home/assets/img/SketchPng011ef35b32ef075413b756766208370cde43357dffc3333d2acf29b70793c15d.png"
+ />
+ </div>
+ <div class="text" style="font-size: 10px;font-weight: 400;color: #777777;">
+ 出示称重码
+ </div>
+ </van-col>
+ </van-row>
+ </div>
+ <div class="serves">
+ <div style="padding-left: 20px;">
+ <div class="title">其他服务</div>
+ <van-row>
+ <van-col span="6" class="serveItem">
+ <div>
+ <van-image
+ :src="serve1"
+ />
+ </div>
+ <div>
+ 我的用药
+ </div>
+ </van-col>
+ <van-col span="6" class="serveItem">
+ <div>
+ <van-image
+ :src="serve1"
+ />
+ </div>
+ <div>
+ 检验指标
+ </div>
+ </van-col>
+ <van-col span="6" class="serveItem">
+ <div>
+ <van-image
+ :src="serve1"
+ />
+ </div>
+ <div>
+ 科室公告
+ </div>
+ </van-col>
+ <van-col span="6" class="serveItem">
+ <div>
+ <van-image
+ :src="serve1"
+ />
+ </div>
+ <div>
+ 科室介绍
+ </div>
+ </van-col>
+ <van-col span="6" class="serveItem">
+ <div>
+ <van-image
+ :src="serve1"
+ />
+ </div>
+ <div>
+ 智慧云客服
+ </div>
+ </van-col>
+ </van-row>
+ </div>
+ </div>
+ <van-tabbar v-model="active" @change="tabChang">
+ <van-tabbar-item name="home" @click="active = 'home'" icon="home-o">首页</van-tabbar-item>
+ <van-tabbar-item name="my" @click="active = 'my'" icon="manager">我的</van-tabbar-item>
+ </van-tabbar>
+ </div>
+</template>
+<script lang="ts" setup>
+ import { ref } from 'vue'
+ import serve1 from './imgs/serve1.png'
+ import { Image as VanImage,Tabbar as VanTabbar , TabbarItem as VanTabbarItem} from 'vant'
+ import {useRouter} from 'vue-router'
+ const router=useRouter()
+ const active=ref('my')
+ const tabChang=(index:any)=>{
+ if (index==='home'){
+ router.push('/')
+ } else {
+ router.push('my')
+ }
+ }
+</script>
+<style lang="scss" scoped>
+.page{
+ background-color: #F6FAFF;
+ position:relative;
+ min-width: 375px;
+ min-height: 800px;
+ text-align: center;
+ .hader{
+ margin-top: 20px;
+ margin-bottom: 20px;
+ height: 50px;
+ width: 92%;
+ margin-left: 4%;
+ text-align:left;
+ .hader-regth{
+ height: 50px;
+ text-align:right;
+ line-height: 50px;
+ }
+ }
+ .userInfo{
+ width: 92%;
+ margin-left: 4%;
+ height: 100px;
+ background: #FFFFFF;
+ box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
+ border-radius: 5px;
+ .info16{
+ text-align: left;
+ // background:red;
+ .div1{
+ margin-top: 20px;
+ margin-bottom: 6px;
+ height: 21px;
+ font-size: 15px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #333333;
+ line-height: 21px;
+ .but{
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #FDFDFD;
+ background:rgb(77, 124, 212);
+ border-radius: 8px;
+ height: 20px;
+ line-height: 20px;
+ font-size: 13px;
+ padding: 2px 8px;
+ }
+ }
+ .div2{
+ height: 17px;
+ font-size: 12px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #777777;
+ line-height: 17px;
+ }
+ .div3{
+ margin-top: 6px;
+ height: 20px;
+ font-size: 14px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #777777;
+ line-height: 20px;
+ }
+
+ }
+ }
+ .serves{
+ background: #FFFFFF;
+ border-radius: 8px;
+ align-self: center;
+ margin-top: 20px;
+ width: 92%;
+ margin-left: 4%;
+ padding-top: 12px;
+ // padding-left: 20px;
+ padding-bottom: 20px;
+ .title{
+ margin-top: 12px;
+ overflow-wrap: break-word;
+ color: rgba(51, 51, 51, 1);
+ font-size: 14px;
+ font-family: PingFangSC-Medium;
+ text-align: left;
+ white-space: nowrap;
+ line-height: 20px;
+ // margin-bottom: 20px;
+ }
+ .serveItem{
+ margin-top: 20px;
+ font-size: 13px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #333333;
+ line-height: 20px;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
index 1f5d301..7c1bd47 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,4 +1,26 @@
<template>
- <div>hello test page</div>
+ <div>hello test page{{content}}</div>
+ <div>{{data.a}}</div>
+ <button @click="butclick">点击</button>
</template>
+<script lang="ts" setup>
+ import {ref,reactive,watchEffect,watch} from 'vue'
+ const data=reactive({
+ a:'chenyinc',
+ h:'dadsad'
+ })
+ const butclick=()=>{
+ data.a='你好'
+ content.value='haha'
+ }
+ const content=ref('content')
+ watchEffect(()=>{
+ const x1=data.a
+ console.log('watchEffect所指定的回调执行了',x1)
+ })
+ watch(content,(newValue,oldValue)=>{
+ console.log(newValue,oldValue,'变化了')
+ })
+
+</script>
--
Gitblit v1.8.0