p_auxiliary_sample_adding
/
auxiliary_sample
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善页面

feature/sampleHome_0122
LiLongLong 6 months ago
parent
152eb17847
commit
b12de2ec57
18 changed files with 384 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 5
      package-lock.json
  3. 1
      package.json
  4. 3
      src/App.vue
  5. 1
      src/assets/return.svg
  6. 6
      src/eventBus.ts
  7. 6
      src/router/index.ts
  8. 12
      src/stores/counter.ts
  9. 0
      src/stores/index.ts
  10. 12
      src/views/Simple.vue
  11. 83
      src/views/Test.vue
  12. 31
      src/views/components/Header.vue
  13. 108
      src/views/components/SimpleCard.vue
  14. 36
      src/views/components/SimpleCardVertical.vue
  15. 1
      src/views/components/index.ts
  16. 8
      src/views/components/simple.ts
  17. 54
      src/views/style/simpleCard.css
  18. 81
      src/views/style/simpleCardVertical.css

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Vite App</title>
<title>辅助加样</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

5
package-lock.json
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^1.7.9", "axios": "^1.7.9",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"mitt": "^3.0.1",
"pinia": "^2.3.0", "pinia": "^2.3.0",
"ramda": "^0.30.1", "ramda": "^0.30.1",
"rxjs": "^7.8.1", "rxjs": "^7.8.1",
@ -3263,9 +3264,7 @@
"node_modules/mitt": { "node_modules/mitt": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz", "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
"dev": true,
"license": "MIT"
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
}, },
"node_modules/mrmime": { "node_modules/mrmime": {
"version": "2.0.0", "version": "2.0.0",

1
package.json
View File

@ -13,6 +13,7 @@
"dependencies": { "dependencies": {
"axios": "^1.7.9", "axios": "^1.7.9",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"mitt": "^3.0.1",
"pinia": "^2.3.0", "pinia": "^2.3.0",
"ramda": "^0.30.1", "ramda": "^0.30.1",
"rxjs": "^7.8.1", "rxjs": "^7.8.1",

3
src/App.vue
View File

@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import Header from './views/components/Header.vue'
</script> </script>
<template> <template>
<div> <div>
<Header></Header>
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>

1
src/assets/return.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="7.811767578125" height="13.949738502502441" viewBox="0 0 7.811767578125 13.949738502502441"><g><path d="M6.97503,13.9497C6.76072,13.9497,6.54649,13.8682,6.38292,13.7048L0.245222,7.56707C-0.0817409,7.24061,-0.0817409,6.71049,0.245222,6.38352L6.38292,0.245222C6.70997,-0.0817406,7.2395,-0.0817406,7.56655,0.245222C7.89351,0.571688,7.89351,1.10181,7.56655,1.42877L2.02088,6.97506L7.56655,12.5206C7.89351,12.8477,7.89351,13.3772,7.56655,13.7043C7.40358,13.8682,7.18925,13.9497,6.97503,13.9497Z" fill="#34495E" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

6
src/eventBus.ts
View File

@ -0,0 +1,6 @@
import mitt from 'mitt'
type Events = {
menuId: number,
}
export const eventBus = mitt<Events>()

6
src/router/index.ts
View File

@ -1,6 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import Simple from '../views/Simple.vue' import Simple from '../views/Simple.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
@ -10,6 +9,11 @@ const router = createRouter({
component: Simple, component: Simple,
}, },
{ {
path: '/test',
name: 'test',
component: () => import('../views/Test.vue'),
},
{
path: '/about', path: '/about',
name: 'about', name: 'about',
// route level code-splitting // route level code-splitting

12
src/stores/counter.ts
View File

@ -10,3 +10,15 @@ export const useCounterStore = defineStore('counter', () => {
return { count, doubleCount, increment } return { count, doubleCount, increment }
}) })
export const useMenuStore = defineStore('menu', ()=>{
const menuId = ref(0)
const setMenuId = (id:number)=> {
menuId.value = id
}
return {
menuId,
setMenuId
}
})

0
src/stores/index.ts
View File

12
src/views/Simple.vue
View File

@ -1,12 +1,10 @@
<template> <template>
<div class="simple_home"> <div class="simple_home">
<aside class="sidebar">
<Header></Header>
</aside>
<main> <main>
<div class="main"> <div class="main">
<div v-for="(item, index) in simpleCardList" :key="index"> <div v-for="(item, index) in simpleCardList" :key="index">
<SimpleCard :simpleInfo="item" :key="item.id"></SimpleCard> <SimpleCard :simpleInfo="item" :key="item.id"></SimpleCard>
<!-- <SimpleCardVertical :simpleInfo="item" :key="item.id"></SimpleCardVertical> -->
</div> </div>
</div> </div>
</main> </main>
@ -14,17 +12,17 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from 'vue' import {ref} from 'vue'
import Header from './components/Header.vue'
import SimpleCard from './components/SimpleCard.vue' import SimpleCard from './components/SimpleCard.vue'
import SimpleCardVertical from './components/SimpleCardVertical.vue'
const simpleCardList = ref([{ const simpleCardList = ref([{
id:1, id:1,
time:123, time:123,
state:1
state:1,
},{ },{
id:2, id:2,
time:123, time:123,
state:1
state:1,
},{ },{
id:3, id:3,
time:123, time:123,
@ -54,8 +52,6 @@
margin-top:-5px; margin-top:-5px;
} }
.simple_home{ .simple_home{
width: 320px;
height: 320px;
background: #ECF2FF; background: #ECF2FF;
} }
.sidebar { .sidebar {

83
src/views/Test.vue
View File

@ -0,0 +1,83 @@
<template>
<div class="test_return">
<van-nav-bar
title="测试页面"
left-text="返回"
left-arrow
@click-left="onReturn"
/>
<div class="card">
<div v-for="(item, index) in 6" :key="index" class="test_card">
{{ item }}
<div class="test_status">
<div class="test_font">开始加样</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {eventBus} from '@/eventBus'
let menuId = ref(1)
const router = useRouter()
const onReturn = () => {
menuId.value = 0
eventBus.emit("menuId", 0)
router.go(-1)
}
const list = [6]
const cardList = ref(list)
const simpleCard = ref(cardList)
</script>
<style scoped>
.test_return{
background: #ECF2FF;
.return{
display: flex;
}
span{
font-size: 12px;
}
.card{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: row;
}
.test_card{
width: 30%;
height: 110px;
background: #ffffff;
margin-top:10px;
margin-left: 10px;
text-align: center;
padding-top:10px;
border-radius: 5px;
font-weight: bold;
}
.test_status{
height: 50px;
background: #1871F8;
border-radius: 5px;
margin: 17px 6px;
.test_font{
font-size: 15px;
color: #FFFFFF;
padding-top: 14px;
padding-left: 3px;
}
}
}
</style>

31
src/views/components/Header.vue
View File

@ -5,14 +5,17 @@
</div> </div>
<div class="header_menu"> <div class="header_menu">
<van-dropdown-menu class="header_menu_item" style="background-color:#e1f0fb"> <van-dropdown-menu class="header_menu_item" style="background-color:#e1f0fb">
<van-dropdown-item v-model="menuId" :options="menuList" />
<van-dropdown-item v-model="menuId" :options="menuList" @click="onHandleMenu"/>
</van-dropdown-menu> </van-dropdown-menu>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import logo from '@/assets/logo.png' import logo from '@/assets/logo.png'
import { ref } from 'vue';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {eventBus} from '@/eventBus'
const router = useRouter()
const menus = [{ const menus = [{
text: '菜单', text: '菜单',
value: 0 value: 0
@ -23,19 +26,33 @@
const menuId = ref(0) const menuId = ref(0)
const menuList = ref(menus) const menuList = ref(menus)
onMounted(()=>{
//测试页面返回时，需要调整菜单
eventBus.on('menuId', (value:number)=>{
menuId.value = value
})
})
const onHandleMenu = () => {
//跳转测试页面
if(menuId.value === 0){
router.push('/')
}
if(menuId.value === 1){
router.push('/test')
}
}
</script> </script>
<style scoped> <style scoped>
.header{ .header{
width: 100%; width: 100%;
display: flex; display: flex;
height:40px;
.header_logo{ .header_logo{
width:100px; width:100px;
height: 19px; height: 19px;
padding-top: 9px; padding-top: 9px;
padding-left:15px; padding-left:15px;
img{
margin-top: 5px;
}
} }
.header_menu{ .header_menu{
@ -52,8 +69,8 @@
:deep(.van-dropdown-menu__bar){ :deep(.van-dropdown-menu__bar){
background-color: #1871F8; background-color: #1871F8;
border-radius: 5px; border-radius: 5px;
height: 35px;
height: 30px;
width: 90px;
.van-ellipsis{ .van-ellipsis{
color:white; color:white;
} }

108
src/views/components/SimpleCard.vue
View File

@ -13,15 +13,48 @@
</div> </div>
</div> </div>
<div class="simple_btn items-center"> <div class="simple_btn items-center">
<van-button type="danger" size="mini" style="width:90px">清除设定</van-button>
<van-button v-if="simpleCard.id == 1" type="danger" size="mini" style="width:90px" @click="onReset">清除设定</van-button>
<van-button v-else type="success" size="mini" style="width:90px" @click="onSetTime">设定时间</van-button>
</div> </div>
<van-popup v-model:show="show" destroy-on-close round position="bottom">
<van-picker v-model="selectedHours" :key="1" title="选择时间" :columns="hoursColumns" @confirm="onConfirm" @cancel="show=false"/>
</van-popup>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'
import { ref } from 'vue';
import { showConfirmDialog, TimePicker } from 'vant';
import remainingTime from '@/assets/simpleCard/remaining_time.png' import remainingTime from '@/assets/simpleCard/remaining_time.png'
import { clearTime } from './simple'
const count = ref(1) const count = ref(1)
const selectedHours = ref([1,1,1]);
const hoursList:any = []
const minuteList:any = []
const scoendList: any = []
for(let i = 0; i<12; i++){
let value = i + 1
hoursList.push({
text: value,
value
})
}
for(let i = 0; i<60; i++){
let value = i
minuteList.push({
text: value,
value
})
scoendList.push({
text: value,
value
})
}
console.log('hoursList---', hoursList)
const hoursColumns:any = ref([hoursList,minuteList,scoendList])
const props = defineProps({ const props = defineProps({
simpleInfo:{ simpleInfo:{
type:Object, type:Object,
@ -29,61 +62,34 @@
} }
}) })
const simpleCard = ref(props.simpleInfo)
</script>
<style scoped>
.simple_card{
width: 100px;
height: 137px;
background: #FFFFFF;
border-radius: 8px;
opacity: 1;
.simple_pos{
text-align: center;
font-family: HarmonyOS Sans SC;
font-size: 22px;
font-weight: bold;
line-height: normal;
color: #1871F8;
const onReset = ()=> {
//是否清除
showConfirmDialog({
title: '清除设定',
message:'是否清除该时间设定',})
.then(() => {
clearTime()
})
.catch(() => {
});
} }
.simple_time{
width: 90px;
height: 70px;
border-radius: 6px;
opacity: 1;
background: #1871F8;
padding-top:2px;
margin-left: 5px;
.simple_remaining_time{
display: flex;
color: #FFFFFF;
text-align: center;
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-left: 10px;
}
const show = ref(false);
const onSelect = () => {
.simple_countdown{
width: 84px;
height: 32px;
border-radius: 6px;
opacity: 1;
background: #195DC4;
color: #FFFFFF;
padding-top: 5px;
text-align: center;
margin-left:3px;
margin-top:2px;
} }
const onSetTime = ()=> {
show.value = true;
} }
.simple_btn{
border-radius: 6px;
width: 90px;
margin-left:5px;
}
//确认完成时间
const onConfirm = (selectedValues=[]) => {
console.log('selectedHours---', selectedHours, selectedValues)
show.value = false;
} }
const simpleCard = ref(props.simpleInfo)
</script>
<style scoped>
@import '../style/simpleCard.css'
</style> </style>

36
src/views/components/SimpleCardVertical.vue
View File

@ -0,0 +1,36 @@
<template>
<div class="simple_card">
<div class="simple_content">
<div class="simple_seq">
{{ simpleCard.id }}
</div>
<div class="simple_time_icon">
<img :src="remainingTime"/>
<div class="simple_remaining_time">剩余时间</div>
</div>
<div class="simple_countdown">
12:00:00
</div>
</div>
<div class="simple_btn">
<button size="mini" class="simple_clear">确定</button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import remainingTime from '@/assets/simpleCard/remaining_time.png'
const count = ref(1)
const props = defineProps({
simpleInfo:{
type:Object,
default:()=>{}
}
})
const simpleCard = ref(props.simpleInfo)
</script>
<style scoped>
@import "../style/simpleCardVertical.css"
</style>

1
src/views/components/index.ts
View File

@ -1,2 +1,3 @@
import { default as SimpleCard } from './SimpleCard.vue' import { default as SimpleCard } from './SimpleCard.vue'
import { default as Header } from './Header.vue' import { default as Header } from './Header.vue'
import { default as SimpleCardVertical } from './SimpleCardVertical.vue'

8
src/views/components/simple.ts
View File

@ -0,0 +1,8 @@
const clearTime = () => {
console.log('12')
}
export {
clearTime
}

54
src/views/style/simpleCard.css
View File

@ -0,0 +1,54 @@
.simple_card{
width: 100px;
height: 137px;
background: #FFFFFF;
border-radius: 8px;
opacity: 1;
.simple_pos{
text-align: center;
font-family: HarmonyOS Sans SC;
font-size: 22px;
font-weight: bold;
line-height: normal;
color: #1871F8;
}
.simple_time{
width: 90px;
height: 70px;
border-radius: 6px;
opacity: 1;
background: #1871F8;
padding-top:2px;
margin-left: 5px;
.simple_remaining_time{
display: flex;
color: #FFFFFF;
text-align: center;
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-left: 10px;
}
.simple_countdown{
width: 84px;
height: 32px;
border-radius: 6px;
opacity: 1;
background: #195DC4;
color: #FFFFFF;
padding-top: 5px;
text-align: center;
margin-left:3px;
margin-top:2px;
}
}
.simple_btn{
border-radius: 6px;
width: 90px;
margin-left:5px;
}
}

81
src/views/style/simpleCardVertical.css
View File

@ -0,0 +1,81 @@
.simple_card{
width: 310px;
height: 42px;
background: #FFFFFF;
border-radius: 8px;
opacity: 1;
display: flex;
gap: 5px;
.simple_content{
width: 198px;
height: 37px;
border-radius: 8px;
background: #5BE881;
margin: auto;
margin-left: 2px;
display:flex;
.simple_seq{
color: #ffffff;
padding-left: 15px;
padding-top: 5px;
width: 35px;
}
.simple_time_icon{
display: flex;
img{
width: 15px;
height: 15px;
margin: auto;
}
.simple_remaining_time{
display: flex;
color: #FFFFFF;
text-align: center;
font-size: 13px;
font-weight: bold;
padding-top: 10px;
padding-left: 5px;
}
}
.simple_pos{
height: 25px;
font-size: 22px;
font-weight: bold;
}
.simple_countdown{
width: 84px;
height: 32px;
border-radius: 6px;
opacity: 1;
background: #52D375;
color: #FFFFFF;
padding-top: 5px;
text-align: center;
margin-left:3px;
margin-top:2px;
}
}
.simple_btn{
border-radius: 6px;
width: 107px;
height: 37px;
margin-top:3px;
background: #5BE881;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
.simple_clear{
color:#FFFFFF;
}
}
}
Write Preview
Loading…
Cancel
Save