TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

新增记录模块页面

Browse Source
This commit is contained in:
张冬雪
2022-01-11 17:15:00 +08:00
parent c810dbdb1d
commit f7b4468119
83 changed files with 16340 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
pages/vip/nutritionHelper.vue Normal file
View File

@@ -0,0 +1,277 @@
<!--
* @Description:
* @Author: Aimee·Zhang
* @Date: 2022-01-07 16:02:01
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-10 17:31:22
-->
<template>
<view class="NutritionHelper">
<!-- 轮播图 -->
<view class="swiper">
<view class="swiper-box">
<swiper autoplay @change="swiperCount = $event.detail.current">
<swiper-item><image src="https://yanxuan.nosdn.127.net/static-union/163971170765382b.jpg" mode="aspectFill" /></swiper-item>
<swiper-item><image src="https://yanxuan.nosdn.127.net/948240ec17accbb8bb2184bde9b62e8f.jpg" mode="aspectFill" /></swiper-item>
</swiper>
<view class="swiper-pages">
<text class="pages-item" :class="{ show: swiperCount === 0 }"></text>
<text class="pages-item" :class="{ show: swiperCount === 1 }"></text>
</view>
</view>
</view>
<!-- 导航菜单 -->
<scroll-view class="scroll-view_H" scroll-x="true">
<view v-for="(item, index) in 5" :key="index" id="demo1" class="scroll-view-item_H">
<u-image width="120rpx" height="120rpx" v-if="item === 1" :src="require('../../static/imgs/ic_loca.png')" :lazy-load="true" class="u-img" radius="4" />
<u-image width="120rpx" height="120rpx" v-if="item === 2" :src="require('../../static/imgs/ic_Medicine.png')" :lazy-load="true" class="u-img" radius="4" />
<u-image width="120rpx" height="120rpx" v-if="item === 3" :src="require('../../static/imgs/ic_report.png')" :lazy-load="true" class="u-img" radius="4" />
<u-image width="120rpx" height="120rpx" v-if="item === 4" :src="require('../../static/imgs/ic_SignIn.png')" :lazy-load="true" class="u-img" radius="4" />
<u-image width="120rpx" height="120rpx" v-if="item === 5" :src="require('../../static/imgs/ic_SignIn.png')" :lazy-load="true" class="u-img" radius="4" />
<view class="title">正确洗脸</view>
</view>
</scroll-view>
<!-- 精品推荐 -->
<view>
<view class="page-title">
精品推荐
<u-icon name="arrow-right" color="#999" label="更多" labelPos="left" labelColor="#999" />
</view>
<!-- 消息列表 -->
<view class="helper-list" v-for="item in 2" :key="item">
<view class="help-logo">
<view class="logo">ZH</view>
<view class="info">
<span class="title">ZH大健康</span>
<span class="des">ZH健康官方账号</span>
</view>
</view>
<view class="help-content">
<view class="--content">
<view class="title ellipsis">不要随意按摩,小心加重你的劲椎病小心加重你的劲椎病小心加重你的劲椎病</view>
<view class="read-time">
<view class="read">阅读4k+</view>
<view class="zan">4k+ 点赞</view>
</view>
</view>
<u-image width="240rpx" height="180rpx" :src="require('../../static/imgs/newsss.png')" :lazy-load="true" class="u-img" radius="10" />
</view>
</view>
</view>
<!-- 更多推荐 -->
<view>
<view class="page-title">
更多推荐
<u-icon name="arrow-right" color="#999" label="更多" labelPos="left" labelColor="#999" />
</view>
<!-- 消息列表 -->
<view class="helper-list" v-for="item in 2" :key="item">
<view class="help-logo">
<view class="logo">ZH</view>
<view class="info">
<span class="title">ZH大健康</span>
<span class="des">ZH健康官方账号</span>
</view>
</view>
<view class="help-content">
<view class="--content pt10">
<u-image width="100%" :src="require('../../static/imgs/newsss.png')" :lazy-load="true" mode="widthFix" class="u-img" radius="2" />
<view class="title2">为什么工作效率那么低呢？</view>
<view class="des ellipsis">
因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒
</view>
<view class="read-time">
<view class="read">阅读4k+</view>
<view class="zan">4k+ 点赞</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swiperCount: 0
};
}
};
</script>
<style lang="scss" scoped>
.NutritionHelper {
// swiper
.swiper {
background: linear-gradient(#fff, #f3f6fb);
padding: $padding;
.swiper-box {
position: relative;
padding-top: 40%;
swiper,
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
image {
border-radius: $radius;
}
}
.swiper-pages {
position: absolute;
z-index: 9;
left: 0;
right: 0;
bottom: $margin - 10;
height: 7rpx;
text-align: center;
.pages-item {
vertical-align: top;
display: inline-block;
height: 7rpx;
width: 25rpx;
margin: 0 5rpx;
background: rgba($color: #fff, $alpha: 0.5);
&.show {
background: white;
}
}
}
}
// 横向滚动
.scroll-view_H {
white-space: nowrap;
border-radius: $radius;
.scroll-view-item_H {
display: inline-block;
width: 130rpx;
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
// box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
.title {
text-align: center;
padding: $padding * 0.6 $padding * 0.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-gray;
font-size: $title-size - 2;
width: 160rpx;
}
.u-img {
margin-left: $margin;
text-align: center;
}
}
}
// 标题
.page-title {
font-size: $title-size * 1.6;
font-weight: bold;
padding: $padding;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
// 消息列表
.helper-list {
padding: $padding;
border-bottom: solid 1rpx #f9f9f9;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
margin: $margin;
border-radius: $radius;
// 企业logo
.help-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.logo {
width: 90rpx;
height: 90rpx;
background: $main-color;
border-radius: 50%;
color: $text-color;
line-height: 90rpx;
text-align: center;
font-size: $title-size + 12;
font-weight: bold;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-left: $margin * 0.4;
.title {
font-size: $title-size + 4;
color: $text-color;
}
.des {
font-size: $title-size-m;
color: $text-gray-m;
margin-top: $title-size * 0.2;
}
}
}
// 标题部分
.help-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.pt10 {
padding-top: $padding;
}
.--content {
font-size: $title-size;
margin-right: $margin * 0.4;
.title {
font-size: $title-size + 6;
font-weight: bold;
margin-top: $margin;
}
.title2 {
font-size: $title-size + 2;
margin-top: $margin;
}
.des {
color: $text-gray-m;
font-size: $title-size-m + 2;
margin-top: 10rpx;
}
.read-time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: $title-size;
padding: $padding * 1.4 0 0 0;
.read {
background: #fdf7ec;
color: #ffcb79;
padding: $padding * 0.2 $padding * 0.8;
border-radius: $radius * 0.4;
}
.zan {
margin-left: $margin;
color: $text-gray-m;
}
}
}
}
}
}
</style>