<template>
    <div class="root prohibitCopy">
        <loading_box v-show="loading" data-html2canvas-ignore></loading_box>
        <div
            class="incentiveDes"
            v-if="showApplyBox && fromLiveRoom"
            @click="applyDistributor"
        >
            <span class="incentive-des__default">
                申请成为{{ recruitName }}，争当销售达人
                <i></i>
            </span>
        </div>
        <div class="invite-img-box">
            <div class="inviteCardBox">
                <div
                    class="changeBtn"
                    v-if="
                        posterItem &&
                        posterItem.default_poster_mark === 'study_cls'
                    "
                    @click="changeRecTxt"
                >
                    <span
                        class="iconfont icon-replace"
                        data-html2canvas-ignore
                    ></span>
                    <span>换一条励志语录</span>
                </div>
                <img
                    :src="posterUrl"
                    id="inviteCard"
                    :style="{ height: cardHeight }"
                    :class="[
                        'inviteCard',
                        imgLoadFinsh ? 'inviteCardImgFin' : 'inviteCardImg',
                        isOtherPlatform ? 'ios-img-touch' : '',
                        showApplyBox ? 'small-img' : '',
                    ]"
                    ref="inviteCardImg"
                    @click="gotouchstart"
                    @touchstart="gotouchstart"
                    @touchmove="gotouchmove"
                    @touchend="gotouchend"
                />
            </div>

            <div class="saveDes" v-if="isPc">右键复制图片，分享给好友</div>
            <div class="saveDes" v-else>
                <img
                    src="~imgPath/distribute/icon_fingerprint.png"
                    data-html2canvas-ignore
                />
                长按上方图片保存并分享
            </div>
        </div>

        <div class="posterBottom" id="posterBottom">
            <!-- FIXME: -->
            <!-- v-fixIPhoneX="{ paddingBottom: '0.68rem' }"
            v-fixIPhoneX.qq="{ paddingBottom: '34px' }" -->
            <div class="bottomScrollWrap">
                <div
                    class="bottomScroll"
                    ref="bottomScroll"
                    :class="{ bottomScrollBar: isPc }"
                >
                    <ul class="scrollInner" ref="scrollInner">
                        <li
                            v-for="(item, index) in listImg"
                            data-html2canvas-ignore
                            @click="touchToChange(item, index)"
                            :class="{ 'select-border': listIndex == index }"
                            :id="item.id"
                            :key="index"
                        >
                            <!-- 为了解决某些机型微信下识别图片区域不准确问题，将img图换成背景图 -->
                            <div
                                class="backImg-box"
                                data-html2canvas-ignore
                                :style="{
                                    backgroundImage: `url(${item.poster_url})`,
                                }"
                            >
                                <img
                                    data-html2canvas-ignore
                                    v-show="listIndex === index"
                                    src="http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/221676e9435ac5e91f9bb487cd743ec5.png"
                                    class="rightIcon"
                                />
                            </div>
                        </li>
                    </ul>
                </div>
                <div
                    :class="[
                        'recommendBtn',
                        this.listImg &&
                        this.listImg.length != 0 &&
                        this.listImg.length < 2
                            ? 'recommendBtnCenter'
                            : '',
                    ]"
                    @click.stop="hanldeShareBox"
                >
                    <template v-if="!isEnterpriseLive">
                        <div class="box-shadow"></div>
                        <i
                            class="iconfont icon-recommend recommendIcon"
                            data-html2canvas-ignore
                        ></i>
                        <span>推荐语</span>
                    </template>
                </div>
            </div>
            <newCardAlertBox
                data-html2canvas-ignore
                :share_url="share_url"
                @copySuccess="copySuccess"
                @shareSuccess="shareSuccess"
                v-if="!fromElive"
            ></newCardAlertBox>
        </div>

        <alert_box></alert_box>
        <coming-promoter
            :showPop="isFirstDistributor"
            :boxInfo="boxInfo"
        ></coming-promoter>
        <authentication-message-box></authentication-message-box>
        <posterDom
            :posterItem="posterItem"
            :initInfo="initInfo"
            :motiveInfo="motiveInfo"
            @posterCompleted="posterCompleted"
            v-if="isShowPosterContent"
        />
        <shareDailog
            v-if="showShareBox && shareAddInfo.recommend_text"
            :recommendText="shareAddInfo.recommend_text"
            @close="hanldeShareBox"
        />
    </div>
</template>

<script>
/* eslint-disable vue/no-unused-components */
/* eslint-disable vue/no-unused-components */
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import WeChat from "~publicAsset/libs/init_wechat";
import EventBus from "~publicAsset/libs/eventbus";
import alert_box from "~publicAsset/modules/alertBox/frame.vue";
import loading_box from "~publicAsset/modules/inviteCardLoading.vue";
import cardAlertBox from "~publicAsset/modules/alertBox/card_alert_box.vue";
import returnBtn from "~publicAsset/modules/returnBtn.vue";
import comingPromoter from "~publicAsset/modules/alertBox/coming_promoter.vue";
import utils from "~publicAsset/libs/utils.js";
import newCardAlertBox from "~publicAsset/modules/alertBox/new_card_alert_box.vue";

import longPress from "~publicAsset/libs/longPress.js";
import { authenticationMessageBox } from "@xiaoe/goose";

import posterDom from "./components/posterDom.vue";
import shareDailog from "./components/shareDailog.vue";
import * as API from "./api/index.js";
import { getQueryStr } from "~publicAsset/libs/get_params_utils.js";
import NetWork from "@xiaoe/js-tools";
import { imgToBlob } from "@xiaoe/js-tools";
import { ENTERPRISE_LIVE } from "./libs/shop_type_env";

export default {
    data: function () {
        return {
            listImg: [],
            loading: false,
            share_url: "",
            imgLoadFinsh: false,
            isFirstDistributor: false,
            initInfo: {}, // 推广员相关信息及商品信息
            boxInfo: {
                btnText: "开始赚钱",
                des: "您可在【我的】-【推广中心】查看收益",
                url: "",
            },
            posterUrl: "",
            showShareBox: false,
            posterItem: null,
            listIndex: 0,
            shareAddInfo: {
                motive_text: {},
                recommend_text: [],
            },
            resInfo: null,
            motiveInfo: null,
            isInviteSentence: 0, // 是否复制了推荐语 0-无复制邀请语 1-复制邀请语
            isSavePoster: 0, // 是否长按保存海报 0-未长按海报 1-长按海报
            posterStyle: "", //海报类型
            cardHeight: "8rem",
            customShareConf: [], // 自定义分享信息
            isMiniTerminal: wx && wx.CLIENT_ENV === "wx_miniProgram",
            isLoadCoder: false,
            recruitName: "",
        };
    },
    computed: {
        isShowPosterContent() {
            if (
                !this.isMiniTerminal &&
                this.posterItem &&
                this.initInfo.user_info
            ) {
                //h5逻辑
                return true;
            } else if (this.isMiniTerminal && this.isLoadCoder) {
                //小程序要等小程序码加载完成
                return true;
            }
            return false;
        },
        // 是否为企业直播店铺
        isEnterpriseLive() {
            // FIXME:
            return false;
            // const qLive = window.wx.SHOP_TYPE_ENV;
            // return qLive == ENTERPRISE_LIVE;
        },
        isPc() {
            return wx.CLIENT_TYPE === "PC";
        },
        // 是否展示申请成为推广员tip
        showApplyBox() {
            // 需满足一下条件才显示：推广员总开关打开、不是推广员、开启招募、是分销商品、不是第一次成为推广员
            let {
                is_use_func = false,
                is_distrobutor = false,
                is_recruit = false,
                is_distribute_goods = false,
            } = this.initInfo;

            return (
                is_use_func &&
                !is_distrobutor &&
                is_recruit &&
                is_distribute_goods &&
                !this.isFirstDistributor
            );
        },
        // 推广来源是否来自直播间
        fromLiveRoom() {
            return utils.getQueryString("fromLiveRoomInivte");
        },
        // 推广来源是否来自鹅直播
        // 鹅直播会拼 unique_type=elive
        fromElive() {
            if (utils.urlParse().unique_type === "elive") {
                return true;
            } else {
                return false;
            }
        },
        // 是否在除微新及xiaoeapp外的其他平台
        isOtherPlatform() {
            let result = false;
            if (
                window.wx &&
                wx.CLIENT_ENV !== "wechat" &&
                wx.CLIENT_ENV !== "xiaoeapp"
            ) {
                result = true;
            }
            return result;
        },
        isCompany() {
            // FIXME:
            // const VERSION_TYPE = document.getElementById('version_type').value;
            // if ([170, 171].indexOf(Number(VERSION_TYPE)) > -1) {
            //     return true;
            // } else {
            //     return false;
            // }
            return false;
        },
    },
    components: {
        alert_box,
        loading_box,
        cardAlertBox,
        returnBtn,
        comingPromoter,
        newCardAlertBox,
        authenticationMessageBox,
        posterDom,
        shareDailog,
    },
    async created() {
        this.getUrlParmas();
        this.initWechat();
        this.getInitData();
        this.getPosterSet();
        // 如果是企学院，需要去判断一下是否接入企业微信，此时会阻塞页面
        if (this.isCompany) {
            await this.checkIsQywxTraining();
        }
        this.getPosterList();
        this.getRecruitName();
        setTimeout(() => {
            this.sensorsReport("ADM03003_view_goodsposter", {
                resource_type: this.resInfo.resource_type || "",
            });
        }, 1000);
    },
    mounted() {
        this.fitPopperOnIphoneX();
        this.$nextTick(() => {
            this.computeHeight();
        });
        this.$refs.inviteCardImg.onload = () => {
            this.imgLoadFinsh = true;
        };
        this.$refs.bottomScroll.addEventListener("scroll", this.handleScroll);
    },
    methods: {
        // 判断是否为企业微信授权的企学院
        checkIsQywxTraining() {
            return new Promise((resolve) => {
                NetWork.request({
                    url: "/training/corp/entry_mode",
                    method: "get",
                }).then((res) => {
                    const { code, data } = res;
                    if (code === 0) {
                        if (data.entry_mode === 1) {
                            window.__shop_type = 1;
                        }
                    }
                    resolve();
                });
            });
        },
        // 获取小程序二维码
        async getQrcodeUrl() {
            let resoureInfo = this.initInfo.resource_info;

            let shareCode = this.fromElive
                ? resoureInfo.share_url
                : resoureInfo.qr_code;
            let qrCodeURL = this.fromElive
                ? "/wxa/get_xiaoe_alive_mini_program_qrcode"
                : "/wxa/get_mini_program_qrcode";
            let h5Url =
                this.initInfo.resource_info.qr_code.indexOf("?") > -1
                    ? `${shareCode}&share_user_id=${this.initInfo.user_info.user_id}`
                    : `${shareCode}?share_user_id=${this.initInfo.user_info.user_id}`;
            let params = {
                h5_url: h5Url,
            };
            // 判断当前是鹅直播还是店铺小程序，生成不同二维码
            await NetWork.request({
                url: qrCodeURL,
                method: "post",
                params,
            }).then((res) => {
                if (res.code === 0) {
                    this.initInfo.resource_info.qr_code = res.data;
                    try {
                        imgToBlob(res.data)
                            .then((url) => {
                                this.initInfo.resource_info.qr_code = url;
                            })
                            .catch(() => {
                                this.initInfo.resource_info.qr_code = res.data;
                            })
                            .finally(() => {
                                this.isLoadCoder = true;
                            });
                    } catch (e) {
                        this.initInfo.resource_info.qr_code = res.data;
                        this.isLoadCoder = true;
                    }
                }
            });
        },
        // 获取推广员自定义名称
        getRecruitName() {
            let params = {
                url: "/drp/get_recruit_name",
            };
            NetWork.request(params)
                .then(({ code, data }) => {
                    if (code === 0) {
                        this.recruitName = data.recruit_name;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 适配sdk保存图片弹窗
        fitPopperOnIphoneX() {
            if (
                wx &&
                wx.CLIENT_SYSTEM === "IOS" &&
                window.screen.height >= 812 &&
                window.devicePixelRatio >= 2
            ) {
                const head =
                    document.head || document.getElementsByTagName("head")[0];
                const style = document.createElement("style");
                style.type = "text/css";
                head.appendChild(style);
                const sheet = style.sheet || style.styleSheet;
                sheet.insertRule(
                    ".sdk-popper > div:first-child > div:first-child" +
                        "{ height: auto !important; padding-bottom: 0.3rem !important; }"
                );
            }
        },
        //获取海报列表
        getPosterList() {
            let repertory_id = getQueryStr("repertory_id") || null;
            let params = {
                resource_id: this.resInfo.resource_id,
                resource_type: this.resInfo.resource_type,
            };
            // 分销商品使用分销类型22和repertory_id查询海报信息
            if (repertory_id) {
                params.resource_id = repertory_id;
                params.resource_type = 22;
            }
            API.getPosterList(params).then((res) => {
                let { code, data } = res;
                if (code === 0) {
                    this.listImg = data.list || [];
                    // 计算底部海报宽度 2.7+0.16+(0.96+0.09*2)*this.listImg.length
                    this.$refs.scrollInner.style.width =
                        (this.isEnterpriseLive ? 0 : 1.36) +
                        1.16 * this.listImg.length +
                        "rem";
                    this.getPosterDetail(this.listImg[0].id);
                }
            });
        },
        getPosterDetail(poster_id) {
            let product_id = getQueryStr("product_id") || "";
            let params = {
                resource_id: this.resInfo.resource_id,
                product_id: product_id ? product_id : this.resInfo.resource_id,
                resource_type: this.resInfo.resource_type,
                poster_id,
            };
            this.loading = true;
            API.getPosterDetail(params)
                .then((res) => {
                    let { code, data } = res;
                    if (code === 0) {
                        this.posterItem = data || {};
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        // 获得初始化信息
        async getInitData() {
            let { code, data } = await this.getPromotion();
            if (code === 0 && data) {
                this.initInfo = data || {};
                if (this.isMiniTerminal) {
                    this.getQrcodeUrl();
                }
                this.isFirstDistributor =
                    this.initInfo.is_first_tobe_distributor || false;
                this.share_url =
                    this.initInfo.resource_info.share_url ||
                    window.location.href;
                this.share_url =
                    this.share_url.indexOf("?") > -1
                        ? `${this.share_url}&sw=1`
                        : `${this.share_url}?sw=1`;
                //个税代缴弹窗
                this.taxSignConfirm();
            }
        },
        // 获取用户自定义分享信息
        getCustomShareConf() {
            const params = {
                url: "get_custom_share_conf",
                params: {
                    share_type: 2, // 分享类型：1微页面,2资源课程，3-拼团活动, 4-优惠码
                    business_id: this.resInfo.resource_id, // 资源id
                    is_need_share_conf: 1,
                    content_app_id: getQueryStr("content_app_id") || "",
                },
            };
            return NetWork.request(params)
                .then((res) => {
                    if (res && res.code === 0) {
                        return res.data.original_data;
                    } else {
                        return Promise.reject(res);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 微信初始化
        async initWechat() {
            console.time("get share info");
            // FIXME:
            // let params = {
            //     payment_type: getQueryStr('type') || '',
            //     resource_type: this.resInfo.resource_type || '',
            //     resource_id: this.resInfo.resource_id || '',
            //     product_id: getQueryStr('product_id') || '',
            //     page_url: window.location.href,
            //     content_app_id: getQueryStr('content_app_id') || '',
            //     repertory_id: getQueryStr('repertory_id') || '',
            //     source: getQueryStr('source') || ''
            // };
            let params = {
                payment_type: 2,
                resource_type: 1,
                resource_id: "i_61246807e4b09a591795e647",
                product_id: "i_61246807e4b09a591795e647",
                page_url:
                    "https://appaklwlitn7978.h5.xiaoeknow.com/v1/poster/1/i_61246807e4b09a591795e647?type=2&product_id=i_61246807e4b09a591795e647&show_retrun_btn=1",
                content_app_id: "",
                repertory_id: "",
                source: "",
            };
            Promise.all([
                this.getCustomShareConf(),
                API.getWechatData(params),
            ]).then(([shareConf, res]) => {
                let { code, data } = res;
                if (code === 0 && data) {
                    data.wxData = Object.assign({}, data.wxData, shareConf);
                    WeChat.init(data);
                    console.timeEnd("get share info");
                }
            });
        },
        // 获取推广员信息
        getPromotion() {
            // FIXME:
            let product_id = "i_61246807e4b09a591795e647";
            let payment_type = 2;
            let content_app_id = "";
            // let product_id = getQueryStr('product_id') || '';
            // let payment_type = getQueryStr('type') || '';
            // let content_app_id = getQueryStr('content_app_id') || '';
            let params = {
                resource_id: this.resInfo.resource_id,
                product_id: product_id ? product_id : this.resInfo.resource_id,
                resource_type: this.resInfo.resource_type,
                payment_type,
                content_app_id,
            };
            return API.getPromotion(params).catch((error) => {
                console.error(error);
            });
        },
        // 获得励志语及分享语信息
        getPosterSet() {
            // setting_type 3海报励志语 4海报推荐语
            API.getPosterSet({}).then((res) => {
                let { code, data } = res;
                if (code === 0) {
                    this.shareAddInfo = data || { auther: "", text: "" };
                    this.changeRecTxt();
                }
            });
        },
        posterCompleted(url) {
            this.posterUrl = url;
            this.loading = false;
        },
        //触摸预览图改变邀请卡样式
        touchToChange(item, index) {
            this.listIndex = index;
            if (item.default_poster_mark === "study_cls") {
                this.posterStyle = "study_cls";
            } else {
                this.posterStyle = "";
            }
            this.computeHeight();
            // 默认图片不请求接口
            if (item.is_default) {
                this.loading = true;
                if (this.posterItem && this.posterItem.shop_name) {
                    this.posterItem = {
                        id: item.id,
                        default_poster_mark: item.default_poster_mark,
                        shop_name: this.posterItem.shop_name,
                    };
                } else {
                    this.getPosterDetail(item.id);
                }
            } else {
                this.getPosterDetail(item.id);
            }
        },
        // 获取地址栏参数
        getUrlParmas() {
            // FIXME:
            // let pathname = location.pathname || '';
            // let urlParam = pathname.split('/v1/poster/')[1].split('/');
            // this.resInfo = {
            //     resource_type: urlParam[0],
            //     resource_id: urlParam[1]
            // };
            this.resInfo = {
                resource_type: 2,
                resource_id: "i_61246807e4b09a591795e647",
            };
        },
        // 换一条励志语
        changeRecTxt() {
            this.loading = true;
            let temInfo = this.shareAddInfo.motive_text || [];
            let random = Math.floor(Math.random() * temInfo.length);
            this.motiveInfo = temInfo[random] || {};
            this.motiveInfo.id = `study_${random}`;
        },
        // 计算比例，根据手机显示海报卡片
        computeHeight() {
            let clientHeight =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            let posterBottomHeight =
                document.getElementById("posterBottom").offsetHeight;
            let gapHeight = clientHeight - posterBottomHeight - 32; // 32为保存图片提示语调节值
            // 直播间过来显示推广语时
            if (this.showApplyBox && this.fromLiveRoom) {
                // 显示推广语时
                this.cardHeight = `${gapHeight * 0.87}px`;
            } else {
                this.cardHeight = `${gapHeight * 0.95}px`;
            }
        },
        /**
         * applyDistributor 申请成为推广员
         */
        applyDistributor() {
            eJump("distribute_recruit");
        },
        // 神策
        sensorsReport(eventName, reportInfo) {
            try {
                window.sensors &&
                    window.sensors.track(eventName, { ...reportInfo });
            } catch (err) {
                console.log(err);
            }
        },
        copySuccess() {
            this.sensorsReport("click_butt", {
                ...this.getReportBaseParams(),
                page_button: "复制链接",
            });
            this.sensorsReport("ADM03003_link_copy", {
                activity_type: 0,
                resource_type: this.resInfo.resource_type || "",
            });
        },
        shareSuccess() {
            this.sensorsReport("click_butt", {
                ...this.getReportBaseParams(),
                page_button: "分享到微信",
            });
            this.sensorsReport("ADM03003_wechat_share", {
                activity_type: 0,
                resource_type: this.resInfo.resource_type || "",
            });
        },
        gotouchstart() {
            this.isSavePoster = 1;
            longPress.gotouchstart(
                {
                    event_name: "ADM03003_poster_press",
                    activity_type: 0,
                    invite_sentence: this.isInviteSentence,
                    poster_type: this.posterItem.poster_type_name || "",
                    resource_type: this.resInfo.resource_type || "",
                },
                () => {
                    this.sensorsReport("click_butt", {
                        ...this.getReportBaseParams(),
                        page_button: "长按保存",
                    });
                }
            );
        },
        gotouchmove() {
            longPress.gotouchmove();
        },
        gotouchend() {
            longPress.gotouchend();
        },
        hanldeShareBox(isInviteSentence = 0) {
            this.showShareBox = !this.showShareBox;
            this.isInviteSentence = isInviteSentence;
            if (this.showShareBox) {
                this.sensorsReport("ADM03003_invite_click", {
                    activity_type: 0,
                    resource_type: this.resInfo.resource_type || "",
                    save_poster: this.isSavePoster,
                });
            }
        },
        //个税代缴-签约弹窗
        taxSignConfirm() {
            this.initInfo.is_distrobutor &&
                this.$taxSignConfirm({
                    signScene: 2,
                }).then((hasSign) => {});
        },
        getReportBaseParams() {
            return {
                page_id: "C#h5#alive#alive_share",
                l_program: "H5",
                page_name: "分享直播页",
                page_path: "C端#H5#直播#分享直播页",
                app_id: this.initInfo?.user_info?.app_id || "",
                c_user_id: this.initInfo?.user_info?.user_id || "",
                product_id: this.resInfo?.resource_id || "",
                product_type: this.resInfo?.resource_type || "",
                resource_id: this.resInfo?.resource_id || "",
            };
        },
    },
};
</script>

<style lang="scss">
.root {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    background: #f5f5f5;
}
.prohibitCopy {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.invite-img-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.incentiveDes {
    box-sizing: border-box;
    padding: 0 0.32rem;
    width: 100%;
    height: 0.8rem;
    background: #fff2e6;
    font-size: 0.28rem;
    line-height: 0.8rem;
    span {
        display: inline-block;
        cursor: pointer;
        i {
            position: relative;
            top: -0.03rem;
            right: -2.8rem;
            display: inline-block;
            width: 0.12rem;
            height: 0.12rem;
            border: 1px solid #ff8205;
            border-bottom: transparent;
            border-left: transparent;
            transform: rotate(45deg);
        }
    }
    .incentive-des__default {
        width: 100%;
        color: #ff8205;
    }
}
.inviteCardBox {
    text-align: center;
    .inviteCard {
        position: relative;
        z-index: 3;
        display: block;
        margin: auto;
        height: 8rem;
        &.small-img {
            height: 6.12rem;
        }
    }
    .changeBtn {
        position: absolute;
        top: 4rem;
        right: 0;
        z-index: 5;
        margin-bottom: 0.24rem;
        padding: 0.28rem 0.24rem;
        width: 0.32rem;
        border-radius: 0.16rem 0 0 0.16rem;
        background: #ffffff;
        box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.08);
        text-align: center;
        font-size: 0.24rem;
    }
    .replaceIcon {
        margin-right: 0.08rem;
        color: #105cfb;
    }
}
.inviteCard {
    transition: all 0.3s linear;
}
.ios-img-touch {
    -webkit-touch-callout: initial;
}
.inviteCardImg {
    opacity: 0;
    transform: translateY(-5rem);
}
.inviteCardImgFin {
    border-radius: 0.16rem;
    box-shadow: 0rem 0.12rem 0.22rem 0rem rgba(0, 0, 0, 0.08);
    opacity: 1;
    transform: translateY(0);
}
.saveDes {
    display: flex;
    justify-content: center;
    margin-top: 0.24rem;
    width: 100%;
    height: 0.36rem;
    color: #333333;
    text-align: center;
    font-size: 0.26rem;
    line-height: 0.36rem;
    img {
        position: relative;
        top: 0.02rem;
        display: block;
        margin-right: 0.08rem;
        width: 0.32rem;
        height: 0.32rem;
    }
}
.bottomScroll {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    box-sizing: border-box;
    padding: 0.12rem 0 0.12rem 0.32rem;
    width: 100%;
    background: #fff;
    &::-webkit-scrollbar {
        display: none;
    }
}
.bottomScrollBar::-webkit-scrollbar {
    display: block;
    height: 10px;
}
.bottomScroll:horizontal {
    display: none;
}
.scrollInner {
    display: flex;
    height: 1.56rem;
    list-style: none;
}
.scrollInner li {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    box-sizing: border-box;
    margin-right: 0.24rem;
    padding: 0.03rem;
    width: 0.92rem;
    height: 1.54rem;
    border: 0.03rem solid transparent;
    border-radius: 0.12rem;
    &:last-child {
        margin-right: 0;
    }
    &.select-border {
        border: 0.03rem solid #105cfb;
        border-radius: 0.16rem;
    }
}
.scrollInner li .backImg-box {
    position: relative;
    overflow: hidden;
    width: 0.8rem;
    height: 1.42rem;
    border-radius: 0.12rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .rightIcon {
        position: absolute;
        right: -0.01rem;
        bottom: -0.01rem;
        width: 0.32rem;
        height: 0.32rem;
    }
}
.scrollInner li img.backImg {
    width: 100%;
    height: 100%;
}
.scrollInner li .iconfont {
    font-size: 0.48rem;
}
.posterBottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
}
.bottomScrollWrap {
    position: relative;
    width: 100%;
}
.recommendBtn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 1.44rem;
    height: 1.76rem;
    background: #ffffff;
    font-size: 0.24rem;
    .box-shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: -0.16rem 0rem 0.16rem -0.16rem rgba(0, 0, 0, 0.3);
    }
    img {
        width: 0.38rem;
        height: 0.38rem;
    }
    span {
        display: block;
        margin-top: 0.18rem;
    }
    .recommendIcon {
        font-size: 22px;
    }
}
.recommendBtnCenter {
    width: 100%;
}
</style>
