pageHead.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <div class="horHead horSty">
  3. <div class="horHead-content">
  4. <div>
  5. <div class="firtitle">
  6. {{ projectObj.localName }}
  7. </div>
  8. <div class="sectitle">
  9. 懂空间,更懂办公
  10. </div>
  11. </div>
  12. <!-- <img :src="title" v-else /> -->
  13. </div>
  14. <div class="horHead-left">
  15. <img :src="logo" alt="" style="height:60px;" />
  16. </div>
  17. <div class="horHead-right">
  18. <div class="right-item">
  19. <span class="item-time">{{ nowstr }}</span>
  20. </div>
  21. <div class="right-item">
  22. {{ weatherText }}
  23. </div>
  24. <div class="right-item" @click="changeScreen">
  25. <img
  26. class="firstImg"
  27. :src="nowScreen == 'vertical' ? changeHor : changeVer"
  28. alt=""
  29. />
  30. </div>
  31. <div class="right-item" style="display:none">
  32. 退出
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script lang="ts">
  38. import Vue from "vue";
  39. // declare function require(img: string): string;
  40. const persagyLogo = require("@/assets/horImg/persagyLogo.svg");
  41. const zhijiangLogo = require("@/assets/horImg/zhijianglogo.png");
  42. const title = require("@/assets/horImg/hor_title.png");
  43. const changeVer = require("@/assets/horImg/changeVer.svg");
  44. const changeHor = require("@/assets/horImg/changeHor.svg");
  45. import { mapState } from "vuex";
  46. import moment from "moment";
  47. export default Vue.extend({
  48. data() {
  49. return {
  50. //logo: this.projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo,
  51. title: title,
  52. changeVer: changeVer,
  53. changeHor: changeHor,
  54. nowScreen: "vertical",
  55. nowstr: "",
  56. // weatherText:''
  57. };
  58. },
  59. mounted() {
  60. // console.log("route", this.$route);
  61. // console.log("router", this.$router);
  62. var path = this.$route.path;
  63. if (path.indexOf("horizontalScreen") > -1) {
  64. this.nowScreen = "horizontal";
  65. } else if (path.indexOf("verticalScreen") > -1) {
  66. this.nowScreen = "vertical";
  67. }
  68. this.nowstr = moment().format("YYYY.MM.DD HH:mm");
  69. setInterval(() => {
  70. this.nowstr = moment().format("YYYY.MM.DD HH:mm");
  71. }, 5000);
  72. },
  73. computed: {
  74. ...mapState({
  75. weatherText(state: any) {
  76. //debugger;
  77. var text = state.weatherCont.text || "晴";
  78. return text;
  79. },
  80. projectId: (state: any) => {
  81. return state.projectId;
  82. },
  83. projectObj: (state: any) => {
  84. //debugger;
  85. return state.projectObj;
  86. },
  87. }),
  88. logo: function(): any {
  89. //console.log("this", this);
  90. var logoTemp =
  91. this.projectId == "Pj3301100002" ? zhijiangLogo : persagyLogo;
  92. return logoTemp;
  93. },
  94. },
  95. methods: {
  96. changeScreen() {
  97. if (this.nowScreen == "vertical") {
  98. this.nowScreen = "horizontal";
  99. this.$router.push({ name: "horizontalScreen" });
  100. } else {
  101. this.nowScreen = "vertical";
  102. this.$router.push({ name: "verticalScreen" });
  103. }
  104. },
  105. },
  106. });
  107. </script>
  108. <style lang="less" scoped>
  109. .horHead {
  110. // display: flex;
  111. // justify-content: space-between;
  112. // align-items: center;
  113. position: relative;
  114. &.horSty {
  115. height: 74px;
  116. // width: 1840px;
  117. }
  118. .horHead-content {
  119. width: 100%;
  120. height: 100%;
  121. color: #3b3558;
  122. text-align: center;
  123. .firtitle {
  124. font-weight: 700;
  125. font-size: 38px;
  126. font-family: Alibaba PuHuiTi;
  127. }
  128. .sectitle {
  129. font-weight: 500;
  130. font-size: 16px;
  131. letter-spacing: 8px;
  132. }
  133. }
  134. .horHead-left {
  135. position: absolute;
  136. top: 0;
  137. left: 0;
  138. }
  139. .horHead-right {
  140. position: absolute;
  141. top: 0;
  142. right: 0;
  143. display: flex;
  144. // justify-content: space-between;
  145. height: 46px;
  146. // width: 396px;
  147. .right-item {
  148. display: flex;
  149. justify-content: center;
  150. align-items: center;
  151. cursor: pointer;
  152. padding: 12px 16px;
  153. font-size: 16px;
  154. color: #575271;
  155. font-weight: 400;
  156. line-height: 22px;
  157. margin-left: 10px;
  158. background: #ffffff99;
  159. border: 2px solid #ffffffcc;
  160. box-sizing: border-box;
  161. border-radius: 8px;
  162. .firstImg {
  163. margin-right: 6px;
  164. }
  165. .item-time {
  166. font-family: Persagy;
  167. font-weight: 400;
  168. }
  169. }
  170. }
  171. }
  172. </style>