zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对应时辰高亮，效果美化

Browse Source
This commit is contained in:
@fawn-nine
2023-12-06 15:18:20 +08:00
parent 3c83081ad5
commit fdd19cc195
1 changed files with 116 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
pages/timeAcupoint/timeAcupoint.vue
View File

@@ -9,17 +9,19 @@
<view class="datetimeBox">
<uni-datetime-picker type="datetime" v-model="date" @change="changeLog" :clear-icon="false" />
</view>
<view class="flexbox box1 grayBg">
<view class="flexbox box1 grayBg">
<view class="">
<text style="color: #999; writing-mode: vertical-rl;">天干<br/>地支</text>
</view>
<text style="color: #666; line-height: 60rpx;">所查询时间：</text><br />
<text style="color: #666; white-space:nowrap;;">{{dateToString}}</text>
</view>
<view class="yunqi">
<view class="">
<text>{{tiangandizhi.hour}}</text>
<text>{{tiangandizhi.day}}</text>
<text>{{tiangandizhi.month}}</text>
<text>{{tiangandizhi.year}}</text>
</view>
<text style="color: #666; line-height: 50rpx; width: 100%; margin-right: 15rpx;">天干地支</text>
<view class="shu">
<text>{{tiangandizhi.hour}} - 时</text>
<text>{{tiangandizhi.day}} - 日</text>
<text>{{tiangandizhi.month}} - 月</text>
<text>{{tiangandizhi.year}} - 年</text>
</view>
</view>
</view>
</view>
@@ -31,7 +33,7 @@
注：表中带* 者是原穴
</view>
<view class="container" style="display: flex;">
<view class="d-table" style="width: 23%;position: relative; z-index: 1;">
<view class="d-table" style="width:15%;position: relative; z-index: 1;">
<view class="leftBar">
<!-- <view :class="i === 1 ? 'd-th' : 'd-td'">张三</view> -->
<table border cellspacing="0" style="width:100%; background-color:#fbd5ca;">
@@ -41,53 +43,53 @@
<tr>
<td class="" style="height: 100rpx;"></td>
</tr>
<tr>
<td class="shuHeight1">23 - 01</td>
<tr :class="curIndex == 2 ? 'cur' :''">
<td class="shuHeight1">23~01</td>
</tr>
<tr class="">
<td class="shuHeight1">01 - 03</td>
<tr :class="curIndex == 3 ? 'cur' :''">
<td class="shuHeight1">01~03</td>
</tr>
<tr>
<td class="shuHeight1">03 - 05</td>
<tr :class="curIndex == 4 ? 'cur' :''">
<td class="shuHeight1">03~05</td>
</tr>
<tr>
<td class="shuHeight1">07 - 09</td>
<tr :class="curIndex == 5 ? 'cur' :''">
<td class="shuHeight1">05~07</td>
</tr>
<tr>
<td class="shuHeight1">09 - 11</td>
<tr :class="curIndex == 6 ? 'cur' :''">
<td class="shuHeight1">07~09</td>
</tr>
<tr>
<td class="shuHeight1">11 - 13</td>
<tr :class="curIndex == 7 ? 'cur' :''">
<td class="shuHeight1">09~11</td>
</tr>
<tr>
<td class="shuHeight1">13 - 15</td>
<tr :class="curIndex == 8 ? 'cur' :''">
<td class="shuHeight1">11~13</td>
</tr>
<tr>
<td class="shuHeight1">15 - 17</td>
<tr :class="curIndex == 9 ? 'cur' :''">
<td class="shuHeight1">13~15</td>
</tr>
<tr>
<td class="shuHeight1">17 - 19</td>
<tr :class="curIndex == 10 ? 'cur' :''">
<td class="shuHeight1">15~17</td>
</tr>
<tr>
<td class="shuHeight1">19 - 21</td>
<tr :class="curIndex == 11 ? 'cur' :''">
<td class="shuHeight1">17~19</td>
</tr>
<tr>
<td class="shuHeight1">19 - 21</td>
<tr :class="curIndex == 12 ? 'cur' :''">
<td class="shuHeight1">19~21</td>
</tr>
<tr>
<td class="shuHeight1">21 - 23</td>
<tr :class="curIndex == 13 ? 'cur' :''">
<td class="shuHeight1">21~23</td>
</tr>
</table>
</view>
</view>
<scroll-view scroll-x class="border-right" style="width: 80%;">
<scroll-view scroll-x class="border-right" style="width: 85%;">
<view class="d-table scroll-x">
<table border style="width: 800px; background-color: antiquewhite;" cellspacing="0">
<tr class="tableTh" >
<table border style="width: 600px; background-color: antiquewhite;" cellspacing="0">
<tr class="tableTh">
<!-- <td colspan="1" class=""></td> -->
<td class="" colspan="2">灵龟八法</td>
<td class="" colspan="2">飞腾八法</td>
<td class="" colspan="5">子午流注</td>
<td class="oneHeight" colspan="2">灵龟八法</td>
<td class="oneHeight" colspan="2">飞腾八法</td>
<td class="oneHeight" colspan="5">子午流注</td>
</tr>
<tr class="tableTh">
<!-- <td colspan="1" rowspan="2" class=""></td> -->
@@ -106,29 +108,39 @@
<td class="">过时泄本</td>
<td class="">过时补原</td>
</tr>
<tr v-for="(item,index) in quxue" :key="index">
<td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
<td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl" :style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
<tr v-for="(item,index) in quxue" :key="index" :class="item.now ? 'cur' : ''">
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.KX)}">{{item.lgbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.lgbf.HX)}">{{item.lgbf.HX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.KX)}">{{item.ftbf.KX}}</text></td>
<td class="shuHeight "><text class="verticalRl"
:style="{color: getHightLightColor(item.ftbf.HX)}">{{item.ftbf.HX}}</text></td>
<td class="shuHeight ">
<view class="flexbox" v-if="item.zwlz.ngf.length > 0" style="justify-content: space-evenly;align-items: center; align-content: center;">
<text class="verticalRl" :style="{color: getHightLightColor(item1)}" v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
<view class="flexbox" v-if="item.zwlz.ngf.length > 0"
style="justify-content: space-evenly;align-items: center; align-content: center;">
<text class="verticalRl" :style="{color: getHightLightColor(item1)}"
v-for="(item1,index1) in item.zwlz.ngf" :key="index1">{{item1}}</text>
</view>
</td>
<td class="shuHeight">
<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.bf)}">{{item.zwlz.nzf.bf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.xf)}">{{item.zwlz.nzf.xf}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsxb)}">{{item.zwlz.nzf.gsxb}}</text>
</td>
<td class="shuHeight">
<text class="verticalRl" :style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
<text class="verticalRl"
:style="{color: getHightLightColor(item.zwlz.nzf.gsbf)}">{{item.zwlz.nzf.gsbf}}</text>
</td>
</tr>
@@ -170,6 +182,7 @@
data() {
return {
playData: {},
curIndex: null,
pageWidth: uni.getSystemInfoSync().windowWidth,
pageHeight: uni.getSystemInfoSync().windowHeight - 200,
fiveYunNum: 5,
@@ -177,17 +190,18 @@
date: new Date().getTime(), // 返回年月日带时间
dateToString: formatDateTime(new Date()), // 字符串格式的日期
timestamp: Date.now() - 2 * 24 * 3600 * 1000, // 时间戳
showCalendar: false,
showCalendar: false,
quxue: [], // 时辰取穴
tiangandizhi:{},
yuanXue:[
'腕骨','丘墟','丘墟','太溪','大陵','京骨','阳池','太渊','合谷','太白','冲阳','神门'],
tiangandizhi: {},
yuanXue: [
'腕骨', '丘墟', '丘墟', '太溪', '大陵', '京骨', '阳池', '太渊', '合谷', '太白', '冲阳', '神门'
],
}
},
onLoad() {
let da = new Date().toISOString().slice(0, 10)
this.timestamp = new Date(da).getTime()
console.log('初始时间', this.dateToString,this.date)
console.log('初始时间', this.dateToString, this.date)
this.getXueWei(this.dateToString)
this.getTGDZ(this.dateToString)
},
@@ -198,13 +212,13 @@
methods: {
scroll: function(e) {},
// 设置文字颜色
getHightLightColor(text){
if(text.indexOf('*') != -1){
getHightLightColor(text) {
if (text.indexOf('*') != -1) {
return "#9c3211"
}
},
// 获取天干地支
getTGDZ(date){
getTGDZ(date) {
let that = this
$http.request({
url: "book/point/TGDZForYear",
@@ -217,11 +231,11 @@
},
})
.then(res => {
if (res.code == 0 ) {
if (res.code == 0) {
console.log('天干地支', res.tgdz)
this.tiangandizhi = res.tgdz
this.tiangandizhi = res.tgdz
}
}).catch(e => {
console.log(e, 'e')
});
@@ -242,17 +256,27 @@
.then(res => {
if (res.code == 0 && res.flag.length > 0) {
console.log('时辰取穴', res.flag)
this.quxue = res.flag
this.quxue = res.flag
this.curIndex = res.flag.findIndex(function(item) {
return item.now == true
})
this.curIndex = this.curIndex + 2
console.log(this.curIndex, 'this.curIndex')
}
}).catch(e => {
this.curIndex = null
console.log(e, 'e')
});
},
// checkAdult(item) {
// return item.now == true
// },
changeLog(e) {
console.log('change事件:', e);
let ss = e.slice(0, 10)
this.timestamp = new Date(ss).getTime()
this.dateToString = e
this.getXueWei(e)
this.getTGDZ(e)
},
@@ -267,26 +291,34 @@
<style lang="scss" scoped>
@import './scss/common.scss';
.leftBar{
td{font-weight: bold; color: #a84a2d;}
.leftBar {
td {
font-weight: bold;
color: #a84a2d;
}
}
tr.cur {
background-color: #f8d4c8;
color: #8d3d16;
background-color: #e7a896;
color: #fff;
td {
color: #fff;
}
}
.tableTh {
background-color:#fbd5ca;
font-weight: bold; color: #a84a2d;
background-color: #fbd5ca;
font-weight: bold;
color: #a84a2d;
}
.shuHeight {
height: 120rpx;
height: 100rpx;
}
.shuHeight1 {
height: 120rpx;
height: 100rpx;
}
.verticalRl {
@@ -294,7 +326,7 @@
}
.oneHeight {
height: 37rpx;
height: 50rpx;
}
.twoHeight {
@@ -338,7 +370,7 @@
.centerBox {
text-align: center;
padding: 20px;
color: #888;
color: #666;
}
.yinli {
@@ -354,12 +386,18 @@
.box1 {
padding: 20rpx;
margin-bottom: 20rpx;
justify-content: space-between;
justify-content: space-between; align-items: center;
.yunqi {
color: #c06346; text-align: center;
text{
writing-mode: vertical-rl; line-height:60rpx;font-size: 30rpx;
color: #c06346;
text-align: right;
.shu {
text {
writing-mode: vertical-rl;
line-height: 60rpx;
font-size: 30rpx;
}
}
}
}