123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <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:60px;" />
- </div>
- <div class="horHead-right">
- <div class="right-item">
- <span class="item-time">{{ nowstr }}</span>
- </div>
- <div class="right-item">
- {{ weatherText }}
- </div>
- <div class="right-item" @click="changeScreen">
- <img
- class="firstImg"
- :src="nowScreen == 'vertical' ? changeHor : changeVer"
- alt=""
- />
- </div>
- <div class="right-item" style="display:none">
- 退出
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import Vue from "vue";
- // declare function require(img: string): string;
- const persagyLogo = require("@/assets/horImg/persagyLogo.svg");
- const zhijiangLogo = require("@/assets/horImg/zhijianglogo.png");
- const title = require("@/assets/horImg/hor_title.png");
- const changeVer = require("@/assets/horImg/changeVer.svg");
- const changeHor = require("@/assets/horImg/changeHor.svg");
- import { mapState } from "vuex";
- import moment from "moment";
- export default Vue.extend({
- data() {
- return {
- //logo: this.projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo,
- title: title,
- changeVer: changeVer,
- changeHor: changeHor,
- nowScreen: "vertical",
- nowstr: "",
- // weatherText:''
- };
- },
- mounted() {
- // console.log("route", this.$route);
- // console.log("router", this.$router);
- var path = this.$route.path;
- if (path.indexOf("horizontalScreen") > -1) {
- this.nowScreen = "horizontal";
- } else if (path.indexOf("verticalScreen") > -1) {
- this.nowScreen = "vertical";
- }
- this.nowstr = moment().format("YYYY.MM.DD HH:mm");
- setInterval(() => {
- this.nowstr = moment().format("YYYY.MM.DD HH:mm");
- }, 5000);
- },
- computed: {
- ...mapState({
- weatherText(state: any) {
- //debugger;
- var text = state.weatherCont.text || "晴";
- return text;
- },
- projectId: (state: any) => {
- return state.projectId;
- },
- projectObj: (state: any) => {
- //debugger;
- return state.projectObj;
- },
- }),
- logo: function(): any {
- //console.log("this", this);
- var logoTemp =
- this.projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo;
- return logoTemp;
- },
- },
- methods: {
- changeScreen() {
- if (this.nowScreen == "vertical") {
- this.nowScreen = "horizontal";
- this.$router.push({ name: "horizontalScreen" });
- } else {
- this.nowScreen = "vertical";
- this.$router.push({ name: "verticalScreen" });
- }
- },
- },
- });
- </script>
- <style lang="less" scoped>
- .horHead {
- // display: flex;
- // justify-content: space-between;
- // align-items: center;
- position: relative;
- &.horSty {
- height: 74px;
- // width: 1840px;
- }
- .horHead-content {
- width: 100%;
- height: 100%;
- color: #3b3558;
- 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;
- }
- .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: 16px;
- color: #575271;
- font-weight: 400;
- line-height: 22px;
- margin-left: 10px;
- background: #ffffff99;
- border: 2px solid #ffffffcc;
- box-sizing: border-box;
- border-radius: 8px;
- .firstImg {
- margin-right: 6px;
- }
- .item-time {
- font-family: Persagy;
- font-weight: 400;
- }
- }
- }
- }
- </style>
|