<!--
 * @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>
