379 lines
12 KiB
Vue
379 lines
12 KiB
Vue
<!--
|
||
* @Description:
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-07 16:02:01
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-14 08:55:56
|
||
-->
|
||
|
||
<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-m;
|
||
width: 160rpx;
|
||
}
|
||
.u-img {
|
||
margin-left: $margin;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标题
|
||
.page-title {
|
||
font-size: $title-size + 8;
|
||
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: 80rpx;
|
||
height: 80rpx;
|
||
background: $main-color;
|
||
border-radius: 50%;
|
||
color: $text-color;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-size: $title-size + 8;
|
||
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-m + 4;
|
||
color: $text-color;
|
||
}
|
||
.des {
|
||
font-size: $title-size-m - 2;
|
||
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;
|
||
font-weight: bold;
|
||
margin-top: $margin;
|
||
}
|
||
.title2 {
|
||
font-size: $title-size-m;
|
||
margin-top: $margin;
|
||
}
|
||
.des {
|
||
color: $text-gray-m;
|
||
font-size: $title-size-m;
|
||
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-m;
|
||
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>
|