|
|
@@ -1,22 +1,783 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
+<template>
|
|
|
+ <view class="detail-page">
|
|
|
+ <cu-custom isBack="true" bgColor="#000000">
|
|
|
+ <view slot="content" style="color: #FFFFFF">UU睡眠</view>
|
|
|
+ </cu-custom>
|
|
|
|
|
|
- </view>
|
|
|
-</template>
|
|
|
+ <scroll-view class="tab" id="tab" :show-scrollbar="false" :scroll-x="true" :scroll-into-view="tabScrollInto">
|
|
|
+ <view class="tabContent" style="display: flex; flex-direction: column;">
|
|
|
+ <view style="display: flex;flex-direction: row;">
|
|
|
+ <view class="tabItem" v-for="(tab,tabItemIndex) in tabList" :key="tab.id" :id="tab.id" :data-id="tabItemIndex"
|
|
|
+ :data-current="tabItemIndex" @click="pressScrollViewItem">
|
|
|
+ <text class="tabItemTitle"
|
|
|
+ :class="tabIndex==tabItemIndex ? 'tabItemTitleActive' : ''"
|
|
|
+ :style="{width:tabList[tabItemIndex].width + 'px'}"
|
|
|
+ >{{tab.title}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabLineView">
|
|
|
+ <view class="tabLine" :class="isPress ? 'tabLineActive':'tabLineActive'"
|
|
|
+ :style="{left: tabItemLineLeft + 'px', width: tabItemLineWidth + 'px'}"></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <swiper class="childPageView" :current="tabIndex" :duration="250" @change="swiperChange"
|
|
|
+ @animationfinish="swiperChangeEnd" @onAnimationEnd="swiperChangeEnd" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <swiper-item class="childPageViewItem" v-for="(page, childPageViewItemIndex) in tabList" :key="childPageViewItemIndex">
|
|
|
+
|
|
|
+ <scroll-view v-if="childPageViewItemIndex == 0" scroll-y="true" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <view class="tab-detail">
|
|
|
+ <view class="title-tab-detail">睡眠效率</view>
|
|
|
+ <view class="flex-col data-tab-detail">
|
|
|
+ <view class="justify-between header-data-tab flex-row">
|
|
|
+ <text class="self-start">睡眠效率0%</text>
|
|
|
+ <text class="self-end">较差</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row middle-tab-detail">
|
|
|
+ <view class="self-start">
|
|
|
+ <view class="text-middle-tab">昨天 暂无</view>
|
|
|
+ <view class="text-middle-tab">前天 暂无</view>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ src="../../static/report/reportIconMove.png"
|
|
|
+ class="self-end image-middle-tab"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <text class="footer-tab-detail">注：睡眠效率=睡眠总时长/在床时间</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row tip-tab-detail">
|
|
|
+ <image
|
|
|
+ class="image-tip-tab self-end"
|
|
|
+ src="../../static/mine/myAvatar.png" />
|
|
|
+ <view class="text-tip-tab flex-auto">
|
|
|
+ <text class="title-tip-tab">睡眠小贴士</text>
|
|
|
+ <text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
|
|
|
+ 1.聆听平淡而有节律的睡眠音乐
|
|
|
+ 2. 睡前喝一杯加糖的热牛奶
|
|
|
+ 了. 合适的睡姿：左侧卧，仰卧，俯卧（即
|
|
|
+ 趴着睡）
|
|
|
+ 4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-tab-detail">
|
|
|
+ <div class="title-post-tab">健康小知识</div>
|
|
|
+ <image
|
|
|
+ class="image-post-tab"
|
|
|
+ src="../../static/home/homeIconGift.png"
|
|
|
+ />
|
|
|
+ <div class="content-post-tab">
|
|
|
+ 提高睡眠效率的方法
|
|
|
+ 1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
|
|
|
+ 2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
|
|
|
+ 了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
+ <scroll-view v-if="childPageViewItemIndex == 1" scroll-y="true" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <view class="tab-detail">
|
|
|
+ <view class="justify-between flex-row">
|
|
|
+ <view class="title-tab-detail">深浅睡眠</view>
|
|
|
+ <view class="subtile-tab-detail self-end">平均心率61次/分</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ <view>清醒:0H10M</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row tip-tab-detail">
|
|
|
+ <image
|
|
|
+ class="image-tip-tab self-end"
|
|
|
+ src="../../static/mine/myAvatar.png" />
|
|
|
+ <view class="text-tip-tab flex-auto">
|
|
|
+ <text class="title-tip-tab">睡眠小贴士</text>
|
|
|
+ <text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
|
|
|
+ 1.聆听平淡而有节律的睡眠音乐
|
|
|
+ 2. 睡前喝一杯加糖的热牛奶
|
|
|
+ 了. 合适的睡姿：左侧卧，仰卧，俯卧（即
|
|
|
+ 趴着睡）
|
|
|
+ 4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-tab-detail">
|
|
|
+ <div class="title-post-tab">健康小知识</div>
|
|
|
+ <image
|
|
|
+ class="image-post-tab"
|
|
|
+ src="../../static/home/homeIconGift.png"
|
|
|
+ />
|
|
|
+ <div class="content-post-tab">
|
|
|
+ 提高睡眠效率的方法
|
|
|
+ 1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
|
|
|
+ 2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
|
|
|
+ 了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
+
|
|
|
+ <scroll-view v-if="childPageViewItemIndex == 2" scroll-y="true" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <view class="tab-detail">
|
|
|
+ <view class="title-tab-detail">安稳度</view>
|
|
|
+ <view class="flex-col data-tab-detail">
|
|
|
+ <view class="justify-between header-data-tab flex-row">
|
|
|
+ <text class="self-start">入睡时长</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row middle-tab-detail">
|
|
|
+ <view class="self-start">
|
|
|
+ <view class="text-middle-tab">今日 10m</view>
|
|
|
+ <view class="text-middle-tab">昨天 暂无</view>
|
|
|
+ <view class="text-middle-tab">前天 暂无</view>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ src="../../static/report/reportIconMove.png"
|
|
|
+ class="self-end image-middle-tab"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-col data-tab-detail">
|
|
|
+ <view class="justify-between header-data-tab flex-row">
|
|
|
+ <text class="self-start">离床次数</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-row justify-between data-sleep-condition">
|
|
|
+ <view class="flex-col align-start item-sleep-condition">
|
|
|
+ <text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡前：0次</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡后：0次</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col align-start item-sleep-condition">
|
|
|
+ <text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡前：0次</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡后：0次</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col align-start item-sleep-condition">
|
|
|
+ <text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡前：0次</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡后：0次</text>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ src="../../static/report/reportIconMove.png"
|
|
|
+ class="image-sleep-condition self-baseline"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-col data-tab-detail">
|
|
|
+ <view class="justify-between header-data-tab flex-row">
|
|
|
+ <text class="self-start">体动次数</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-row justify-between data-sleep-condition">
|
|
|
+ <view class="flex-col align-start item-sleep-condition">
|
|
|
+ <text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡前：0次</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡后：0次</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col align-start item-sleep-condition">
|
|
|
+ <text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡前：0次</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡后：0次</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex-col align-start item-sleep-condition">
|
|
|
+ <text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡前：0次</text>
|
|
|
+ <text class="subtitle-sleep-condition">入睡后：0次</text>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ src="../../static/report/reportIconMove.png"
|
|
|
+ class="image-sleep-condition self-baseline"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row tip-tab-detail">
|
|
|
+ <image
|
|
|
+ class="image-tip-tab self-end"
|
|
|
+ src="../../static/mine/myAvatar.png" />
|
|
|
+ <view class="text-tip-tab flex-auto">
|
|
|
+ <text class="title-tip-tab">睡眠小贴士</text>
|
|
|
+ <text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
|
|
|
+ 1.聆听平淡而有节律的睡眠音乐
|
|
|
+ 2. 睡前喝一杯加糖的热牛奶
|
|
|
+ 了. 合适的睡姿：左侧卧，仰卧，俯卧（即
|
|
|
+ 趴着睡）
|
|
|
+ 4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-tab-detail">
|
|
|
+ <div class="title-post-tab">健康小知识</div>
|
|
|
+ <image
|
|
|
+ class="image-post-tab"
|
|
|
+ src="../../static/home/homeIconGift.png"
|
|
|
+ />
|
|
|
+ <div class="content-post-tab">
|
|
|
+ 提高睡眠效率的方法
|
|
|
+ 1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
|
|
|
+ 2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
|
|
|
+ 了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <scroll-view v-if="childPageViewItemIndex == 3" scroll-y="true" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <view class="tab-detail">
|
|
|
+ <view class="justify-between flex-row">
|
|
|
+ <view class="title-tab-detail">心率</view>
|
|
|
+ <view class="subtile-tab-detail self-end">平均心率61次/分</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>最高心率：76</view>
|
|
|
+ <view>最低心率：30</view>
|
|
|
+ <view>平均心率：66</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>最高心率：76</view>
|
|
|
+ <view>最低心率：30</view>
|
|
|
+ <view>平均心率：66</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>最高心率：76</view>
|
|
|
+ <view>最低心率：30</view>
|
|
|
+ <view>平均心率： 66</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row tip-tab-detail">
|
|
|
+ <image
|
|
|
+ class="image-tip-tab self-end"
|
|
|
+ src="../../static/mine/myAvatar.png" />
|
|
|
+ <view class="text-tip-tab flex-auto">
|
|
|
+ <text class="title-tip-tab">睡眠小贴士</text>
|
|
|
+ <text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
|
|
|
+ 1.聆听平淡而有节律的睡眠音乐
|
|
|
+ 2. 睡前喝一杯加糖的热牛奶
|
|
|
+ 了. 合适的睡姿：左侧卧，仰卧，俯卧（即
|
|
|
+ 趴着睡）
|
|
|
+ 4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-tab-detail">
|
|
|
+ <div class="title-post-tab">健康小知识</div>
|
|
|
+ <image
|
|
|
+ class="image-post-tab"
|
|
|
+ src="../../static/home/homeIconGift.png"
|
|
|
+ />
|
|
|
+ <div class="content-post-tab">
|
|
|
+ 提高睡眠效率的方法
|
|
|
+ 1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
|
|
|
+ 2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
|
|
|
+ 了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <scroll-view v-if="childPageViewItemIndex == 4" scroll-y="true" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <view class="tab-detail">
|
|
|
+ <view class="justify-between flex-row">
|
|
|
+ <view class="title-tab-detail">呼吸率</view>
|
|
|
+ <view class="subtile-tab-detail self-end">平均呼吸率12次/分</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>最高呼吸率：19</view>
|
|
|
+ <view>最低呼吸率：2</view>
|
|
|
+ <view>平均呼吸率：10</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>最高呼吸率：19</view>
|
|
|
+ <view>最低呼吸率：2</view>
|
|
|
+ <view>平均呼吸率：10</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-sleep-item">
|
|
|
+ <view class="date-sleep-item">2023.06.12</view>
|
|
|
+ <view class="flex-row justify-between">
|
|
|
+ <view>最高呼吸率：19</view>
|
|
|
+ <view>最低呼吸率：2</view>
|
|
|
+ <view>平均呼吸率：10</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row tip-tab-detail">
|
|
|
+ <image
|
|
|
+ class="image-tip-tab self-end"
|
|
|
+ src="../../static/mine/myAvatar.png" />
|
|
|
+ <view class="text-tip-tab flex-auto">
|
|
|
+ <text class="title-tip-tab">睡眠小贴士</text>
|
|
|
+ <text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
|
|
|
+ 1.聆听平淡而有节律的睡眠音乐
|
|
|
+ 2. 睡前喝一杯加糖的热牛奶
|
|
|
+ 了. 合适的睡姿：左侧卧，仰卧，俯卧（即
|
|
|
+ 趴着睡）
|
|
|
+ 4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-tab-detail">
|
|
|
+ <div class="title-post-tab">健康小知识</div>
|
|
|
+ <image
|
|
|
+ class="image-post-tab"
|
|
|
+ src="../../static/home/homeIconGift.png"
|
|
|
+ />
|
|
|
+ <div class="content-post-tab">
|
|
|
+ 提高睡眠效率的方法
|
|
|
+ 1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
|
|
|
+ 2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
|
|
|
+ 了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <scroll-view v-if="childPageViewItemIndex == 5" scroll-y="true" :style="{height: swiperHeight+'px'}">
|
|
|
+
|
|
|
+ <view class="tab-detail">
|
|
|
+ <view class="title-tab-detail">打鼾</view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="flex-col data-tab-detail">
|
|
|
+ <view class="justify-between header-data-tab flex-row">
|
|
|
+ <text class="self-start">疑似呼吸暂停</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row middle-tab-detail">
|
|
|
+ <view class="self-start">
|
|
|
+ <view class="text-middle-tab">今日 10m</view>
|
|
|
+ <view class="text-middle-tab">昨天 暂无</view>
|
|
|
+ <view class="text-middle-tab">前天 暂无</view>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ src="../../static/report/reportIconMove.png"
|
|
|
+ class="self-end image-middle-tab"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between flex-row tip-tab-detail">
|
|
|
+ <image
|
|
|
+ class="image-tip-tab self-end"
|
|
|
+ src="../../static/mine/myAvatar.png" />
|
|
|
+ <view class="text-tip-tab flex-auto">
|
|
|
+ <text class="title-tip-tab">睡眠小贴士</text>
|
|
|
+ <text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
|
|
|
+ 1.聆听平淡而有节律的睡眠音乐
|
|
|
+ 2. 睡前喝一杯加糖的热牛奶
|
|
|
+ 了. 合适的睡姿：左侧卧，仰卧，俯卧（即
|
|
|
+ 趴着睡）
|
|
|
+ 4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-tab-detail">
|
|
|
+ <div class="title-post-tab">健康小知识</div>
|
|
|
+ <image
|
|
|
+ class="image-post-tab"
|
|
|
+ src="../../static/home/homeIconGift.png"
|
|
|
+ />
|
|
|
+ <div class="content-post-tab">
|
|
|
+ 提高睡眠效率的方法
|
|
|
+ 1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
|
|
|
+ 2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
|
|
|
+ 了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ import cell from './cell.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ cell
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabList: [{
|
|
|
+ id: "tabItem0",
|
|
|
+ title: '睡眠效率',
|
|
|
+ width:70,
|
|
|
+ }, {
|
|
|
+ id: "tabItem1",
|
|
|
+ title: '深浅睡眠',
|
|
|
+ width:70,
|
|
|
+ }, {
|
|
|
+ id: "tabItem2",
|
|
|
+ title: '安稳度',
|
|
|
+ width:70,
|
|
|
+ }, {
|
|
|
+ id: "tabItem3",
|
|
|
+ title: '心率',
|
|
|
+ width:70,
|
|
|
+ }, {
|
|
|
+ id: "tabItem4",
|
|
|
+ title: '呼吸率',
|
|
|
+ width:70,
|
|
|
+ }, {
|
|
|
+ id: "tabItem5",
|
|
|
+ title: '异常状况',
|
|
|
+ width:100,
|
|
|
+ }],
|
|
|
+ tabIndex: 0,
|
|
|
+ tabScrollInto: "",
|
|
|
+ tabListSize: {},
|
|
|
+ tabItemLineLeft: 0,
|
|
|
+ tabItemLineWidth: 0,
|
|
|
+ isPress: false,
|
|
|
+ swiperHeight: 0,
|
|
|
+ item1Data: [{
|
|
|
+ title: '1楼',
|
|
|
+ }, {
|
|
|
+ title: '2楼',
|
|
|
+ }, {
|
|
|
+ title: '3楼',
|
|
|
+ }, {
|
|
|
+ title: '4楼',
|
|
|
+ }, {
|
|
|
+ title: '5楼',
|
|
|
+ }, {
|
|
|
+ title: '6楼',
|
|
|
+ }, {
|
|
|
+ title: '7楼',
|
|
|
+ }, {
|
|
|
+ title: '8楼',
|
|
|
+ }, {
|
|
|
+ title: '9楼',
|
|
|
+ }],
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ let system = uni.getSystemInfoSync();
|
|
|
+ this.swiperHeight = system.windowHeight - 44;
|
|
|
+ console.log(this.swiperHeight);
|
|
|
|
|
|
+ // 跳转时传递index打开指定页面
|
|
|
+ // console.log(option.index)
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ this.setTabItemDistance();
|
|
|
+ this.setTabSelect(this.tabIndex);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pressScrollViewItem(e) {
|
|
|
+ let index = e.target.dataset.current || e.currentTarget.dataset.current;
|
|
|
+ this.isPress = true;
|
|
|
+ this.setTabSelect(index);
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ let index = e.target.current || e.detail.current;
|
|
|
+
|
|
|
+ this.tabIndex = index;
|
|
|
+ this.setTabSelect(this.tabIndex);
|
|
|
+ },
|
|
|
+ setTabItemDistance() {
|
|
|
+
|
|
|
+ var queryTabSize = uni.createSelectorQuery().in(this);
|
|
|
+ for (var i = 0; i < this.tabList.length; i++) {
|
|
|
+ queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
|
|
|
+ }
|
|
|
+ queryTabSize.exec(rects => {
|
|
|
+ rects.forEach((rect) => {
|
|
|
+ this.tabListSize[rect.dataset.id] = rect;
|
|
|
+ })
|
|
|
+ console.log(this.tabListSize);
|
|
|
+ this.setTabItemLinePosition(this.tabListSize[this.tabIndex].left, this.tabListSize[this
|
|
|
+ .tabIndex]
|
|
|
+ .width);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ setTabItemLinePosition(left, width) {
|
|
|
+ this.tabItemLineLeft = left;
|
|
|
+ this.tabItemLineWidth = width;
|
|
|
+ },
|
|
|
+ swiperChangeEnd(e) {
|
|
|
+
|
|
|
+ this.setTabItemLinePosition(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
|
|
|
+
|
|
|
+ },
|
|
|
+ setTabSelect(index) {
|
|
|
+
|
|
|
+ this.tabIndex = index;
|
|
|
+ this.tabScrollInto = this.tabList[index].id;
|
|
|
+ console.log(this.tabScrollInto);
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .data-sleep-condition {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .item-sleep-condition {
|
|
|
+ .title-sleep-condition {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .subtitle-sleep-condition {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .image-sleep-condition {
|
|
|
+ height: 80px;
|
|
|
+ width: 80px;
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-
|
|
|
+
|
|
|
+ .data-sleep-item {
|
|
|
+ background: #0233C699;
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .date-sleep-item {
|
|
|
+ margin-bottom: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .childPageView {
|
|
|
+ padding-bottom: 1.25rem;
|
|
|
+ background-image: linear-gradient(180deg, #1e1ef7f2 0%, #1dbff79c 100%);
|
|
|
+ backdrop-filter: blur(0.19rem);
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-detail {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .title-tab-detail {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .subtile-tab-detail {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .data-tab-detail {
|
|
|
+ background: #0233C699;
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ border-radius: 15px;
|
|
|
+ margin-top: 5px;
|
|
|
+ padding: 15px 10px;
|
|
|
+
|
|
|
+ .header-data-tab {
|
|
|
+ border-bottom: 1px solid #FFFFFF99;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .middle-tab-detail {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid #FFFFFF99;
|
|
|
+
|
|
|
+ .image-middle-tab {
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-tab-detail {
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tip-tab-detail {
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .image-tip-tab {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .text-tip-tab {
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .title-tip-tab {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .post-tab-detail {
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-bottom: 100px;
|
|
|
+
|
|
|
+ .title-post-tab {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .image-post-tab {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .content-post-tab {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ width: 100vw;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: #1e1ef7f2;
|
|
|
+ -webkit-backdrop-filter: blur(0.19rem);
|
|
|
+ backdrop-filter: blur(0.19rem);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ width: 0 !important;
|
|
|
+ height: 0 !important;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabLineView {
|
|
|
+ position: relative;
|
|
|
+ height: 2px;
|
|
|
+ background-color: transparent;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabLine {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabLineActive {
|
|
|
+ transition-duration: 0.3s;
|
|
|
+ transition-property: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .childPageView {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabItem {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabItemTitle {
|
|
|
+ color: #FFFFFF99;
|
|
|
+ font-size: 15px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabItemTitleActive {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .childPageViewItem {
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
</style>
|
dayu