Compare commits
merge into: p_auxiliary_sample_adding:master
p_auxiliary_sample_adding:feature/sampleHome_0122
p_auxiliary_sample_adding:master
pull from: p_auxiliary_sample_adding:feature/sampleHome_0122
p_auxiliary_sample_adding:feature/sampleHome_0122
p_auxiliary_sample_adding:master
2 Commits
master
...
feature/sa
| Author | SHA1 | Message | Date |
|---|---|---|---|
LiLongLong
|
b12de2ec57 |
完善页面
|
6 months ago |
|
LiLongLong
|
152eb17847 |
添加辅助加样首页
|
7 months ago |
22 changed files with 551 additions and 60 deletions
-
2index.html
-
5package-lock.json
-
1package.json
-
54src/App.vue
-
BINsrc/assets/logo.png
-
1src/assets/return.svg
-
BINsrc/assets/simpleCard/logo.png
-
BINsrc/assets/simpleCard/remaining_time.png
-
6src/eventBus.ts
-
12src/router/index.ts
-
12src/stores/counter.ts
-
0src/stores/index.ts
-
9src/views/HomeView.vue
-
62src/views/Simple.vue
-
83src/views/Test.vue
-
87src/views/components/Header.vue
-
95src/views/components/SimpleCard.vue
-
36src/views/components/SimpleCardVertical.vue
-
3src/views/components/index.ts
-
8src/views/components/simple.ts
-
54src/views/style/simpleCard.css
-
81src/views/style/simpleCardVertical.css
@ -1,51 +1,19 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { RouterLink, RouterView } from "vue-router"; |
|
||||
import HelloWorld from "./components/HelloWorld.vue"; |
|
||||
|
import Header from './views/components/Header.vue' |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<header> |
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> |
|
||||
|
|
||||
<div class="wrapper"> |
|
||||
<HelloWorld msg="You did it!" /> |
|
||||
|
|
||||
<h1 class="text-3xl font-bold underline">Hello world!</h1> |
|
||||
|
|
||||
<nav> |
|
||||
<RouterLink to="/">Home</RouterLink> |
|
||||
<RouterLink to="/about">About</RouterLink> |
|
||||
</nav> |
|
||||
</div> |
|
||||
</header> |
|
||||
|
|
||||
<RouterView /> |
|
||||
|
<div> |
||||
|
<Header></Header> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
|
||||
header { |
|
||||
line-height: 1.5; |
|
||||
max-height: 100vh; |
|
||||
.logo { |
|
||||
display: block; |
|
||||
margin: 0 auto 2rem; |
|
||||
} |
|
||||
nav { |
|
||||
width: 100%; |
|
||||
font-size: 12px; |
|
||||
text-align: center; |
|
||||
margin-top: 2rem; |
|
||||
a { |
|
||||
display: inline-block; |
|
||||
padding: 0 1rem; |
|
||||
border-left: 1px solid var(--color-border); |
|
||||
&:first-of-type { |
|
||||
border: 0; |
|
||||
} |
|
||||
&.router-link-exact-active { |
|
||||
color: green; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
<style> |
||||
|
html, |
||||
|
body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
After Width: 192 | Height: 40 | Size: 2.4 KiB |
@ -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> |
||||
|
After Width: 192 | Height: 40 | Size: 2.4 KiB |
|
After Width: 15 | Height: 15 | Size: 435 B |
@ -0,0 +1,6 @@ |
|||||
|
import mitt from 'mitt' |
||||
|
type Events = { |
||||
|
menuId: number, |
||||
|
} |
||||
|
|
||||
|
export const eventBus = mitt<Events>() |
||||
@ -1,9 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<main> |
|
||||
<div>Home Sub View</div> |
|
||||
</main> |
|
||||
</template> |
|
||||
@ -0,0 +1,62 @@ |
|||||
|
<template> |
||||
|
<div class="simple_home"> |
||||
|
<main> |
||||
|
<div class="main"> |
||||
|
<div v-for="(item, index) in simpleCardList" :key="index"> |
||||
|
<SimpleCard :simpleInfo="item" :key="item.id"></SimpleCard> |
||||
|
<!-- <SimpleCardVertical :simpleInfo="item" :key="item.id"></SimpleCardVertical> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</main> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import {ref} from 'vue' |
||||
|
import SimpleCard from './components/SimpleCard.vue' |
||||
|
import SimpleCardVertical from './components/SimpleCardVertical.vue' |
||||
|
|
||||
|
const simpleCardList = ref([{ |
||||
|
id:1, |
||||
|
time:123, |
||||
|
state:1, |
||||
|
},{ |
||||
|
id:2, |
||||
|
time:123, |
||||
|
state:1, |
||||
|
},{ |
||||
|
id:3, |
||||
|
time:123, |
||||
|
state:1 |
||||
|
},{ |
||||
|
id:4, |
||||
|
time:123, |
||||
|
state:1 |
||||
|
},{ |
||||
|
id:5, |
||||
|
time:123, |
||||
|
state:1 |
||||
|
},{ |
||||
|
id:6, |
||||
|
time:123, |
||||
|
state:1 |
||||
|
}]) |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.main{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 5px; |
||||
|
flex-direction: row; |
||||
|
padding-left: 5px; |
||||
|
margin-top:-5px; |
||||
|
} |
||||
|
.simple_home{ |
||||
|
background: #ECF2FF; |
||||
|
} |
||||
|
.sidebar { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -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> |
||||
@ -0,0 +1,87 @@ |
|||||
|
<template> |
||||
|
<div class="header"> |
||||
|
<div class="header_logo"> |
||||
|
<img :src="logo"/> |
||||
|
</div> |
||||
|
<div class="header_menu"> |
||||
|
<van-dropdown-menu class="header_menu_item" style="background-color:#e1f0fb"> |
||||
|
<van-dropdown-item v-model="menuId" :options="menuList" @click="onHandleMenu"/> |
||||
|
</van-dropdown-menu> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import logo from '@/assets/logo.png' |
||||
|
import { ref, onMounted } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import {eventBus} from '@/eventBus' |
||||
|
const router = useRouter() |
||||
|
const menus = [{ |
||||
|
text: '菜单', |
||||
|
value: 0 |
||||
|
},{ |
||||
|
text: '测试页面', |
||||
|
value: 1 |
||||
|
}] |
||||
|
const menuId = ref(0) |
||||
|
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> |
||||
|
<style scoped> |
||||
|
.header{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height:40px; |
||||
|
.header_logo{ |
||||
|
width:100px; |
||||
|
height: 19px; |
||||
|
padding-top: 9px; |
||||
|
padding-left:15px; |
||||
|
} |
||||
|
|
||||
|
.header_menu{ |
||||
|
margin-left:125px; |
||||
|
width: 80px; |
||||
|
padding-top:5px; |
||||
|
color:#FFFFFF; |
||||
|
.header_menu_item{ |
||||
|
color:#FFFFFF |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.van-dropdown-menu__bar){ |
||||
|
background-color: #1871F8; |
||||
|
border-radius: 5px; |
||||
|
height: 30px; |
||||
|
width: 90px; |
||||
|
.van-ellipsis{ |
||||
|
color:white; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
:deep(.van-dropdown-item__content){ |
||||
|
width: 150px; |
||||
|
margin-left: 170px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,95 @@ |
|||||
|
<template> |
||||
|
<div class="simple_card"> |
||||
|
<div class="simple_pos"> |
||||
|
{{ simpleCard.id }} |
||||
|
</div> |
||||
|
<div class="simple_time"> |
||||
|
<div class="simple_remaining_time"> |
||||
|
<img :src="remainingTime"/> |
||||
|
<div>剩余时间</div> |
||||
|
</div> |
||||
|
<div class="simple_countdown"> |
||||
|
12:00:00 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="simple_btn items-center"> |
||||
|
<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> |
||||
|
<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> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { showConfirmDialog, TimePicker } from 'vant'; |
||||
|
import remainingTime from '@/assets/simpleCard/remaining_time.png' |
||||
|
import { clearTime } from './simple' |
||||
|
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({ |
||||
|
simpleInfo:{ |
||||
|
type:Object, |
||||
|
default:()=>{} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const onReset = ()=> { |
||||
|
//是否清除 |
||||
|
showConfirmDialog({ |
||||
|
title: '清除设定', |
||||
|
message:'是否清除该时间设定',}) |
||||
|
.then(() => { |
||||
|
clearTime() |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
const show = ref(false); |
||||
|
const onSelect = () => { |
||||
|
|
||||
|
} |
||||
|
const onSetTime = ()=> { |
||||
|
show.value = true; |
||||
|
} |
||||
|
|
||||
|
//确认完成时间 |
||||
|
const onConfirm = (selectedValues=[]) => { |
||||
|
console.log('selectedHours---', selectedHours, selectedValues) |
||||
|
show.value = false; |
||||
|
} |
||||
|
const simpleCard = ref(props.simpleInfo) |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import '../style/simpleCard.css' |
||||
|
</style> |
||||
@ -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> |
||||
@ -0,0 +1,3 @@ |
|||||
|
import { default as SimpleCard } from './SimpleCard.vue' |
||||
|
import { default as Header } from './Header.vue' |
||||
|
import { default as SimpleCardVertical } from './SimpleCardVertical.vue' |
||||
@ -0,0 +1,8 @@ |
|||||
|
|
||||
|
const clearTime = () => { |
||||
|
console.log('12') |
||||
|
} |
||||
|
|
||||
|
export { |
||||
|
clearTime |
||||
|
} |
||||
@ -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; |
||||
|
} |
||||
|
} |
||||
@ -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
Reference in new issue