qimall/addons/DepositPresale/backend/views/default/components/common/nav/preview.php

<template id="nav-preview">
    <div :class="{abso: activeItem.data.styleChoose == 2}">
        <!-- 导航栏丢到这 - 每个页面固定有这个 -->
        <div class="nav-preview" :style="containStyle">
            <div class="nav-contain flex" :style="containStyle1">
                <div class="nav-cont-title over1" :style="[titleStyle]" v-if="isShowName">
                    <img v-if="contentType" :src="src" alt="" style="display:block;max-width: 112px; height:30px">
                    <span v-else>{{activeItem.data.name || "标题"}}</span>
                </div>
                <!-- <div v-if="searchSwitch" class="search-input over1" :style="serachStyle">
                    <i class="search-icon el-icon-search" :style="iconStyle"></i>
                    <span class="over1">{{activeItem.data.placeholder || '请输入描述'}}</span>
                </div> -->
                <!-- <div v-if="searchSwitch" style="width: 98px;order: 2"></div> -->
            </div>
            <img class="mp-icon" :src="topStatusBar.bg1">
        </div>
    </div>
</template>
<script>
    Vue.component('nav-preview', {
        name: "nav-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            mainPage: {
                type: Object,
                default () {
                    return {}
                }
            },
        },
        template: '#nav-preview',
        computed: {
            containStyle1() {
                var positionChoose = this.activeItem.data.positionChoose || 0
                var result = {}
                if (!this.searchSwitch) {
                    result['justify-content'] = positionChoose == 0 ? 'flex-start' : 'center';
                }
                return result
            },
            contentType() {
                const contentType = this.activeItem.data.contentType
                return contentType == 2
            },
            containStyle() {
                const rgbaColor = this.activeItem.computedStyle.statusBarColor
                return {
                    backgroundColor: rgbaColor
                }
            },
            topStatusBar() {
                const rgbaColor = this.activeItem.computedStyle.statusBarColor
                var type = rgbaColor ? getContrastYIQ(rgbaColor) : 'light'
                var result = {
                    light: {
                        bg: `url("resources/img/decorate/nav/light1.png") no-repeat`,
                        bg1: `resources/img/decorate/nav/light2.png`
                    },
                    dark: {
                        bg: `url("resources/img/decorate/nav/dark1.png")  no-repeat`,
                        bg1: `resources/img/decorate/nav/dark2.png`
                    }
                }
                return result[type]
            },
            titleStyle() {
                var style = this.activeItem.computedStyle.titleDistance || {}
                var color = this.activeItem.computedStyle.statusBar == 1 ? "#000" : "#fff"
                var order = this.activeItem.data.positionChoose || 0
                var positionChoose = this.activeItem.data.positionChoose || 0
                var result = {
                    color,
                    order,
                    background: this.activeItem.computedStyle.titleBgColor,
                    fontSize: `${style.fontSize || 14}px`,
                    height: `${style.height || 0}px`,
                    lineHeight: `${style.height || 0}px`,
                }
                console.log(positionChoose, 'positionChoose')
                if (positionChoose == 1) {} else {
                    result.marginRight = "10px"
                }

                return result
            },
            serachStyle() {
                var borderType = {
                    1: "none",
                    2: "1px solid #000",
                    3: "2px solid #000"
                }
                var borderRadiusType = {
                    1: "30px",
                    2: "0"
                }
                var textAlignType = {
                    1: "flex-start",
                    2: "center",
                    3: "flex-end"
                }
                var style = this.activeItem.computedStyle.searchDistance || {}
                var color = this.activeItem.computedStyle.searchColor
                var border = this.activeItem.computedStyle.border
                var borderStr = borderType[border]
                var searchMarPad = this.activeItem.computedStyle.searchMarPad || {}
                var borderRadius = this.activeItem.computedStyle.searchBorder
                var textAlign = textAlignType[this.activeItem.computedStyle.searchPosition]
                var positionChoose = this.activeItem.data.positionChoose || 0
                var result = {
                    backgroundColor: this.activeItem.computedStyle.searchBgColor,
                    fontSize: `${style.fontSize || 14}px`,
                    height: `${style.height || 29}px`,
                    borderRadius: `${borderRadiusType[borderRadius]}`,
                    border: borderStr,
                    justifyContent: textAlign,
                    color,
                }
                if (positionChoose == 1) {
                    result.width = '84px'
                } else {
                    result.flex = '1'
                }
                return result
            },
            src() {
                return this.activeItem.data.logoSrc
            },
            icon() {
                var {
                    icon
                } = this.activeItem.computedStyle
                if (icon && icon.key !== "text") {
                    return icon
                }
                return false
            },
            iconStyle() {
                var style = this.activeItem.computedStyle.iconSize || {}
                return {
                    width: `${style.size || 14}px`,
                    height: `${style.size || 14}px`,
                }
            },
            searchSwitch() {
                return this.activeItem.data.isShowSearch == 1
            },
            isShowName() {
                return this.activeItem.data.isShowName == 1
            },
        },
        data() {
            return {}
        }
    });
</script>

<style>
    .nav-preview {
        position: relative;
    }

    .nav-contain {
        position: relative;
        box-sizing: border-box;
        height: 44px;
        padding: 0 10px;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }

    .nav-cont-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        text-align: center;
    }

    .flex {
        display: flex;
    }

    .flex-start {
        justify-content: flex-start;
        padding-left: 6px;
    }

    .mp-icon {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 10px;
        width: 88px;
        z-index: 999;
    }

    .search-input {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 141px;
        background: #ddd;
        border-radius: 44px;
        padding: 0 10px;
        color: #fff;
        border: none;
        line-height: 1;
        font-size: 14px;
    }

    .search-icon {
        width: 14px;
        height: 14px;
        font-size: 16px;
        margin-right: 4px;
    }

    .search-center {
        left: 0;
        right: 0;
    }

    .title-img {
        width: 72px;
        height: 25px;
        background-color: #ddd;
    }

    .searchSwitch {
        display: flex;
    }

    .dp-nav-placeholder-icon {
        position: absolute;
        top: 44px;
        right: 0;
        width: 98px;
        height: 44px;
        z-index: 999;
        border-radius: 25px;
        z-index: 99;
    }

    .abso {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        z-index: 100;
    }
</style>