sagacloud-new-daping/src/components/pageHead.vue

<template>
    <div class="horHead horSty">
        <div class="horHead-content">
            <div>
                <div class="firtitle">{{ projectObj.localName }}</div>
                <div class="sectitle">懂空间,更懂办公</div>
            </div>
            <!-- <img :src="title" v-else /> -->
        </div>
        <div class="horHead-left">
            <img
                :src="logo"
                alt=""
                style="height: 48px"
            />
        </div>
        <div class="horHead-right">
            <div class="right-item">
                <span class="item-time">{{ nowStr }}</span>
            </div>
            <div class="right-item">{{ weatherCont.text }}</div>
            <div
                class="right-item"
                @click="changeScreen"
            >
                <img
                    class="firstImg"
                    alt=""
                    :src="nowScreen == 'vertical' ? changeHor : changeVer"
                />
            </div>
            <div
                class="right-item"
                style="display: none"
            >退出</div>
        </div>
    </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import moment from "moment";
import { storeToRefs } from "pinia";
import useProjectStore from "@/store/useProjectStore";
import { dapingImage } from "@/utils/dapingImage";
import { setRem } from "@/utils/rem";

export default defineComponent({
    props: {
        navigateItem: {
            type: String,
        },
    },
    setup(props, contx) {
        const { persagyLogo, zhijiangLogo, changeHor, changeVer } = dapingImage;

        const route: any = useRoute();
        const router = useRouter();
        const projectStore = useProjectStore();

        const { weatherCont, projectObj, projectId } = storeToRefs(
            projectStore
        );

        const allData = reactive({
            // logo: new URL(
            //     "../assets/image/horImg/zhijianglogo.png",
            //     import.meta.url
            // ).href,
            logo: projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo,
            changeHor: changeHor,
            changeVer: changeVer,
            nowScreen:
                route.path.indexOf("horiScreen") > -1
                    ? "horizontal"
                    : "vertical",
            nowStr: moment().format("YYYY.MM.DD HH:mm"),
            setNowInterval() {
                setInterval(() => {
                    var nowTimeStr2 = moment().format("YYYY.MM.DD HH:mm");
                    allData.nowStr = nowTimeStr2;
                }, 30000);
            },
            changeScreen() {
                if (allData.nowScreen == "vertical") {
                    allData.nowScreen = "horizontal";
                    //setRem("horizontal");
                    router.push({ path: "/horiScreen" });
                } else {
                    allData.nowScreen = "vertical";
                    //setRem("vertical");
                    router.push({ path: "/verScreen" });
                }
            },
        });

        onMounted(() => {
            allData.setNowInterval();
        });
        return { ...toRefs(allData), weatherCont, projectObj };
    },
});
</script>

<style scoped lang="scss">
.horHead {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    position: relative;
    &.horSty {
        height: 74px;
    }
    .horHead-content {
        width: 100%;
        height: 100%;
        color: #efdec6;
        text-align: center;
        .firtitle {
            font-weight: 700;
            font-size: 38px;
            font-family: Alibaba PuHuiTi;
        }
        .sectitle {
            font-weight: 500;
            font-size: 16px;
            letter-spacing: 8px;
        }
    }
    .horHead-left {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 0;
    }
    .horHead-right {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        // justify-content: space-between;
        height: 46px;
        // width: 396px;
        .right-item {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            // padding: 12px 16px;
            font-size: 20px;
            color: #efdec6;
            font-weight: 400;
            line-height: 22px;
            margin-left: 18px;
            // background: #ffffff99;
            // border: 2px solid #ffffffcc;
            box-sizing: border-box;
            // border-radius: 8px;
            .firstImg {
                margin-right: 6px;
                width: 28px;
            }
            .item-time {
                font-family: Persagy;
                font-weight: 400;
            }
        }
    }
}
</style>