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