Skip to content

Commit

Permalink
feat: ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@cwj0417
cwj0417 committed Dec 18, 2023
1 parent 18c2568 commit 9d9556f
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 163 deletions.
35 changes: 32 additions & 3 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<Main/>
<Main />
</template>

<script lang="ts">
Expand All @@ -20,11 +20,40 @@ export default defineComponent({
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
color: #aab0b5;
margin-top: 20px;
font-size: 30px;
font-weight: 500;
}
html {
background: #ccc;
background: #222;
}
input {
padding: 5px;
margin: 5px;
border: none;
font-size: 20px;
background: transparent;
width: 150px;
color: #e0e4e8;
text-align: center;
}
input:focus {
outline: none;
}
td {
width: 150px;
}
.text-sm {
font-size: 20px;
}
.text-lg {
font-size: 40px;
}
</style>
7 changes: 4 additions & 3 deletions src/components/components/EarthlyBranchIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<template>
<span>{{src?.name}}</span>
<span v-for="(item, index) of src?.containingHeavenlyStems" :style="{'font-size': (20 - index * 4) + 'px'}">
<span :style="getRenderStyle(src?.containingHeavenlyStems[0].element?.type,src?.containingHeavenlyStems[0].gender)">{{src?.name}}</span>
<span v-if="showHs" v-for="(item, index) of src?.containingHeavenlyStems" :style="{'font-size': (20 - index * 4) + 'px'}">
<HeavenlyStemIcon :src="item" />
</span>
</template>
<script setup>
import HeavenlyStemIcon from './HeavenlyStemIcon.vue'
import { getRenderStyle } from '../../service/util';
defineProps(['src'])
defineProps(['src', 'showHs'])
</script>
278 changes: 136 additions & 142 deletions src/components/item.vue
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,85 @@
<template>
<div>
<input :value="birthday.year" placeholder="年份, 如: 2023" autofocus @input="yearChange"
:style="{ border: valid(birthday.year) ? 'none' : '1px solid red' }" />
<input :value="birthday.monthday" placeholder="月日, 如: 1107" ref="input2Ref" @input="mdChange"
:style="{ border: valid(birthday.monthday) ? 'none' : '1px solid red' }" />
<input :value="birthday.hrminsec" placeholder="时分, 如: 2308" ref="input3Ref" @input="timeChange"
:style="{ border: valid(birthday.hrminsec) ? 'none' : '1px solid red' }" />
<div style="border: 2px solid white;
border-left: none;
border-right: none;
width: 604px;
margin: 15px auto">
<input :value="birthday.year" placeholder="年份, 如: 2023" autofocus @input="yearChange"
:style="{ border: valid(birthday.year) ? 'none' : '1px solid red' }" />
<input :value="birthday.monthday" placeholder="月日, 如: 1107" ref="input2Ref" @input="mdChange"
:style="{ border: valid(birthday.monthday) ? 'none' : '1px solid red' }" />
<input :value="birthday.hrminsec" placeholder="时分, 如: 2308" ref="input3Ref" @input="timeChange"
:style="{ border: valid(birthday.hrminsec) ? 'none' : '1px solid red' }" />
</div>
<div v-if="bazi">
<div style="display: flex; justify-content: center;">
<table>
<tr>
<td>
{{ getSelfRelation(bazi[0][0]) }}
</td>
<td>
{{ getSelfRelation(bazi[1][0]) }}
</td>
<td>
{{ getSelfRelation(bazi[2][0]) }}
</td>
<td>
{{ getSelfRelation(bazi[3][0]) }}
</td>
</tr>
<tr>
<td>
<HeavenlyStemIcon :src="bazi[0][0]" />
</td>
<td>
<HeavenlyStemIcon :src="bazi[1][0]" />
</td>
<td>
<HeavenlyStemIcon :src="bazi[2][0]" />
</td>
<td>
<HeavenlyStemIcon :src="bazi[3][0]" />
</td>
</tr>
<tr>
<td>
<EarthlyBranchIcon :src="bazi[0][1]" />
</td>
<td>
<EarthlyBranchIcon :src="bazi[1][1]" />
</td>
<td>
<EarthlyBranchIcon :src="bazi[2][1]" />
</td>
<td>
<EarthlyBranchIcon :src="bazi[3][1]" />
</td>
</tr>
<tr>
<td>
(<span v-for="hs of bazi[0][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
</td>
<td>
(<span v-for="hs of bazi[1][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
</td>
<td>
(<span v-for="hs of bazi[2][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
</td>
<td>
(<span v-for="hs of bazi[3][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
</td>
</tr>
</table>
<!-- <HeavenlyStemIcon :src="bazi[0][0]" />
<div style="display: flex; justify-content: center;">
<table>
<tr class="text-sm">
<td>
{{ getSelfRelation(bazi[0][0]) }}
</td>
<td>
{{ getSelfRelation(bazi[1][0]) }}
</td>
<td>
{{ getSelfRelation(bazi[2][0]) }}
</td>
<td>
{{ getSelfRelation(bazi[3][0]) }}
</td>
</tr>
<tr class="text-lg">
<td>
<HeavenlyStemIcon :src="bazi[0][0]" />
</td>
<td>
<HeavenlyStemIcon :src="bazi[1][0]" />
</td>
<td>
<HeavenlyStemIcon :src="bazi[2][0]" />
</td>
<td>
<HeavenlyStemIcon :src="bazi[3][0]" />
</td>
</tr>
<tr class="text-lg">
<td>
<EarthlyBranchIcon :showHs="false" :src="bazi[0][1]" />
</td>
<td>
<EarthlyBranchIcon :showHs="false" :src="bazi[1][1]" />
</td>
<td>
<EarthlyBranchIcon :showHs="false" :src="bazi[2][1]" />
</td>
<td>
<EarthlyBranchIcon :showHs="false" :src="bazi[3][1]" />
</td>
</tr>
<tr class="text-sm">
<td>
<div v-for="hs of bazi[0][1].containingHeavenlyStems">
<HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
</div>
</td>
<td>
<div v-for="hs of bazi[1][1].containingHeavenlyStems">
<HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
</div>
</td>
<td>
<div v-for="hs of bazi[2][1].containingHeavenlyStems">
<HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
</div>
</td>
<td>
<div v-for="hs of bazi[3][1].containingHeavenlyStems">
<HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
</div>
</td>
</tr>
</table>
<!-- <HeavenlyStemIcon :src="bazi[0][0]" />
<EarthlyBranchIcon :src="bazi[0][1]" />
<HeavenlyStemIcon :src="bazi[1][0]" />
Expand All @@ -78,9 +90,9 @@
<HeavenlyStemIcon :src="bazi[3][0]" />
<EarthlyBranchIcon :src="bazi[3][1]" /> -->
</div>
<!-- <div>
</div>

<!-- <div>
{{ getSelfRelation(bazi[0][0]) }}
(<span v-for="hs of bazi[0][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
Expand All @@ -93,94 +105,76 @@
{{ getSelfRelation(bazi[3][0]) }}
(<span v-for="hs of bazi[3][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
</div> -->

</div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getfourPillar } from "../service/entity";
import HeavenlyStemIcon from "./components/HeavenlyStemIcon.vue"
import EarthlyBranchIcon from "./components/EarthlyBranchIcon.vue"
import { getRelation } from "../service/util"
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getfourPillar } from "../service/entity";
import HeavenlyStemIcon from "./components/HeavenlyStemIcon.vue"
import EarthlyBranchIcon from "./components/EarthlyBranchIcon.vue"
import { getRelation } from "../service/util"
const props = defineProps(['order'])
// dom refs
const input2Ref = ref(null)
const input3Ref = ref(null)
// vars
const birthday = reactive({
const props = defineProps(['order'])
// dom refs
const input2Ref = ref(null)
const input3Ref = ref(null)
// vars
const birthday = reactive({
year: '',
monthday: '',
hrminsec: ''
})
const bazi = ref(null)
// fns
const getSelfRelation = (target) => getRelation(bazi.value[2][0], target)
let valid = (val) => val?.length === 4
let yearChange = (e) => {
})
const bazi = ref(null)
// fns
const getSelfRelation = (target) => getRelation(bazi.value[2][0], target)
let valid = (val) => val?.length === 4
let yearChange = (e) => {
birthday.year = e?.target.value;
if (valid(birthday.year)) {
input2Ref.value.focus();
input2Ref.value.focus();
}
}
let mdChange = (e) => {
}
let mdChange = (e) => {
birthday.monthday = e?.target.value;
if (valid(birthday.monthday)) {
input3Ref.value.focus();
input3Ref.value.focus();
}
}
let timeChange = (e) => {
}
let timeChange = (e) => {
birthday.hrminsec = e?.target.value;
if (valid(birthday.hrminsec)) {
check()
check()
}
}
let check = () => {
}
let check = () => {
if (valid(birthday.year) && valid(birthday.monthday) && valid(birthday.hrminsec)) {
localStorage.setItem('unmeicache' + props.order, Object.values(birthday).join(','))
bazi.value = getfourPillar(new Date(`${birthday.year} ${birthday.monthday.slice(0, 2)} ${birthday.monthday.slice(2, 4)} ${birthday.hrminsec.slice(0, 2)}:${birthday.hrminsec.slice(2, 4)}`))
console.log(bazi.value)
localStorage.setItem('unmeicache' + props.order, Object.values(birthday).join(','))
bazi.value = getfourPillar(new Date(`${birthday.year} ${birthday.monthday.slice(0, 2)} ${birthday.monthday.slice(2, 4)} ${birthday.hrminsec.slice(0, 2)}:${birthday.hrminsec.slice(2, 4)}`))
console.log(bazi.value)
}
}
onMounted(() => {
}
onMounted(() => {
const cache = localStorage.getItem('unmeicache' + props.order)
if (cache) {
const parsed = cache.split(',')
birthday.year = parsed[0]
birthday.monthday = parsed[1]
birthday.hrminsec = parsed[2]
check()
const parsed = cache.split(',')
birthday.year = parsed[0]
birthday.monthday = parsed[1]
birthday.hrminsec = parsed[2]
check()
}
})
</script>
<style>
input {
padding: 5px;
margin: 5px;
border: none;
font-size: 20px;
background: transparent;
}
input:focus {
outline: none;
}
td {
border: 1px solid black;
}
</style>
})
</script>
2 changes: 1 addition & 1 deletion src/components/main.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div style="margin-bottom: 60px;" @click="add">hi, there is unmei.</div>
<div style="margin-bottom: 20px;" @click="add">hi, there is unmei.</div>
<Item v-for="i in count" :order="i" :key="i"/>
</template>

Expand Down
Loading

0 comments on commit 9d9556f

Please sign in to comment.