From 2a6364632f5480a504c3facb4978f14b14136816 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期五, 23 九月 2022 12:40:22 +0800
Subject: [PATCH] up
---
src/views/paiban/index.vue | 158 +++++++++++++++++++++++++++++++++++++++
src/views/home/index.vue | 6 +
src/views/home/assets/index.scss | 6 +
src/views/test.vue | 42 ++++++++-
src/router/index.ts | 1
src/views/myMine/index.vue | 4 +
6 files changed, 207 insertions(+), 10 deletions(-)
diff --git a/src/router/index.ts b/src/router/index.ts
index 386fc58..3eff3f2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,6 +6,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: '/paiban', name: 'paiban', component: () => import('views/paiban/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 13e5a46..2d43e0f 100644
--- a/src/views/home/assets/index.scss
+++ b/src/views/home/assets/index.scss
@@ -48,10 +48,11 @@
.userHead{
position: absolute;
z-index: 99;
- // position:absolute;
+ width: 80px;
+ height: 80px;
left: 0;
right: 0;
- top: 183px;
+ top: -300px;
bottom: 0;
margin:auto;
@@ -66,6 +67,7 @@
margin:auto;
.meunsitems{
text-align: center;margin:auto;
+ z-index: 100;
box-shadow: 0px 2px 4px 0px rgba(70, 150, 249, 0.1);
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index be98151..e2e4720 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -31,7 +31,7 @@
/>
<div>检验报告</div>
</van-col>
- <van-col span="6" class="item">
+ <van-col span="6" @click="topath('/paiban')" class="item">
<van-image
round
width="42px"
@@ -182,6 +182,10 @@
router.push('my')
}
}
+ const topath=(url:string)=>{
+ console.log('sss')
+ router.push(url)
+ }
onMounted(() => {
console.log('初始化',route)
const queryInfo=route.query
diff --git a/src/views/myMine/index.vue b/src/views/myMine/index.vue
index 1875b56..2a50bfe 100644
--- a/src/views/myMine/index.vue
+++ b/src/views/myMine/index.vue
@@ -119,10 +119,14 @@
}
</script>
<style lang="scss" scoped>
+ body{
+ background-color:#166bd3;
+ }
.page{
background-color:#F6FAFF;
position:relative;
min-width: 375px;
+ min-height: 800px;
.hader{
margin-top: 20px;
margin-bottom: 20px;
diff --git a/src/views/paiban/index.vue b/src/views/paiban/index.vue
new file mode 100644
index 0000000..4699cca
--- /dev/null
+++ b/src/views/paiban/index.vue
@@ -0,0 +1,158 @@
+<template>
+ <div class="paiban">
+ <div>
+ <van-calendar
+ title="透析排班"
+ color="#769AFF"
+ :poppable="false"
+ :show-confirm="false"
+ @select="selectData"
+ :formatter="formatter"
+ :style="{ height: '400px' }"
+ />
+ </div>
+ <div class="listdiv">
+ <div class="listrow">
+ <van-row class="rowhand">
+ <van-col span="18">
+ <van-icon style="color: blue;" name="bell" />
+ 2022年5月24日(周四) 上午</van-col>
+ <van-col span="6">
+ <div>
+ <div class="sqtb">
+ 申请调班
+ </div>
+ </div>
+ </van-col>
+ </van-row>
+ <van-row>
+ <div class="info"></div>
+ <van-row class="lable">
+ <van-col span="12">机号</van-col>
+ <van-col span="12">透析模式</van-col>
+ </van-row>
+ <van-row class="value">
+ <van-col span="12">1区 2号机</van-col>
+ <van-col span="12">HD</van-col>
+ </van-row>
+ </van-row>
+ </div>
+ <div class="listrow">
+ <van-row class="rowhand">
+ <van-col span="18">
+ <van-icon style="color: blue;" name="bell" />
+ 2022年5月24日(周四) 上午</van-col>
+ <van-col span="6">
+ <div>
+ <div class="sqtb">
+ 申请调班
+ </div>
+ </div>
+ </van-col>
+ </van-row>
+ <van-row>
+ <div class="info"></div>
+ <van-row class="lable">
+ <van-col span="12">机号</van-col>
+ <van-col span="12">透析模式</van-col>
+ </van-row>
+ <van-row class="value">
+ <van-col span="12">1区 2号机</van-col>
+ <van-col span="12">HD</van-col>
+ </van-row>
+ </van-row>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts" setup>
+ import {ref,reactive,watchEffect,watch} from 'vue'
+ import { Calendar as vanCalendar } from 'vant'
+ const selectData=(data:any)=>{
+ console.log(data)
+ }
+ const formatter=(day:any)=>{
+ const month = day.date.getMonth() + 1
+ const date = day.date.getDate()
+ if (month === 9) {
+ if (date === 24) {
+ day.bottomInfo='8:30'
+ day.className='paibanclass'
+ } else if (date === 27) {
+ day.bottomInfo='13:00'
+ day.className='paibanclass'
+ }
+ }
+ return day
+ }
+</script>
+<style lang="scss">
+ .paibanclass{
+ // background: rgb(228, 231, 225);
+ color: blue;
+ }
+ .paiban{
+ background-color: #F6FAFF;
+ padding: 0;
+ }
+ .listdiv{
+ margin-top: 20px;
+ .listrow{
+ margin-top: 10px;
+ width: 94%;
+ margin-left: 3%;
+ height: 129px;
+ background: #FFFFFF;
+ box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
+ border-radius: 8px;
+ .rowhand{
+ padding-top: 20px;
+ padding-left: 4px;
+ height: 20px;
+ font-size: 14px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #333333;
+ line-height: 20px;
+ letter-spacing: 1px;
+ .sqtb{
+ color: #4696F9;
+ // background: #4696F9;
+ border: #4696F9 1px solid;
+ width: 60px;
+ border-radius: 4px;
+ font-size: 12px;
+ }
+ }
+ .info{
+ margin-top: 10px;
+ width: 90%;
+ margin-left: 5%;
+ height: 1px;
+ background: #F1F1F2;
+ margin-bottom: 10px;
+ }
+ .lable{
+ width: 90%;
+ margin-left: 5%;
+ height: 17px;
+ font-size: 12px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #AAAAAA;
+ line-height: 17px;
+ }
+ .value{
+ margin-top: 20px;
+ width: 90%;
+ margin-left: 5%;
+ height: 18px;
+ font-size: 13px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #333333;
+ line-height: 18px;
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
index 7c1bd47..148f527 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,19 +1,41 @@
<template>
- <div>hello test page{{content}}</div>
- <div>{{data.a}}</div>
- <button @click="butclick">点击</button>
+ <van-calendar
+ title="透析排班"
+ :poppable="false"
+ :show-confirm="false"
+ @select="selectData"
+ :formatter="formatter"
+ :style="{ height: '400px' }"
+ />
</template>
<script lang="ts" setup>
import {ref,reactive,watchEffect,watch} from 'vue'
+ import { Calendar as vanCalendar } from 'vant'
const data=reactive({
a:'chenyinc',
h:'dadsad'
})
- const butclick=()=>{
- data.a='你好'
- content.value='haha'
- }
const content=ref('content')
+ const selectData=(data:any)=>{
+ console.log(data)
+ }
+ const formatter=(day:any)=>{
+ const month = day.date.getMonth() + 1
+ const date = day.date.getDate()
+
+ if (month === 9) {
+ if (date === 24) {
+ day.topInfo = '上午'
+ day.bottomInfo='8:30'
+ day.className='paibanclass'
+ } else if (date === 27) {
+ day.topInfo = '下午'
+ day.bottomInfo='13:00'
+ day.className='paibanclass'
+ }
+ }
+ return day
+ }
watchEffect(()=>{
const x1=data.a
console.log('watchEffect所指定的回调执行了',x1)
@@ -23,4 +45,10 @@
})
</script>
+<style>
+ .paibanclass{
+ background: rgb(228, 231, 225);
+ color: blue;
+ }
+</style>
--
Gitblit v1.8.0