提交

src/assets/styles/element.scss

@@ -62,7 +62,7 @@
 
 .el-date-picker {
   /* --el-datepicker-text-color: var(--el-text-color-regular); */
-  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
+  --el-datepicker-off-text-color: #fff !important;
   --el-datepicker-header-text-color: #fff !important;
   --el-datepicker-icon-color: #fff !important;
   /* --el-datepicker-border-color: var(--el-disabled-border-color); */
@@ -71,6 +71,7 @@
   /* --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light); */
   /* --el-datepicker-active-color: var(--el-color-primary); */
   --el-datepicker-hover-text-color: #fff !important;
+  --el-datepicker-placeholder-text-color: #fff !important;
 }
 
 .el-date-picker__header-label {

src/views/ueScreen/components/header.vue

@@ -1,7 +1,136 @@
 <template>
-  <div>头部</div>
+  <div class="header">
+    <div class="header-left">
+      <div>
+        <el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
+      </div>
+      <div>
+        <el-select v-model="value" placeholder="请选择项目" style="width: 100%">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+    </div>
+    <div class="header-center">新能源场站智慧运维大数据平台</div>
+    <div class="header-right">
+      <div>
+        <div class="left-section">
+          <img src="@/assets/large/weather.png" alt="天气图标" />
+
+          <span>
+            <span>多云 9°/18°</span>
+          </span>
+        </div>
+      </div>
+      <div>{{ date.ymd }} {{ date.hms }}</div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import '@/assets/styles/element.scss';
+const date: any = ref({
+  ymd: '',
+  hms: '',
+  week: ''
+});
+const value1 = ref('');
+const value = ref('');
+const options = ref([
+  {
+    value: 1,
+    label: '田东县乡村振兴光伏发电项目'
+  },
+  {
+    value: 2,
+    label: '田东县乡村振兴光伏发电项目（二期）'
+  },
+  {
+    value: 3,
+    label: '长顺县朝核农业光伏电站'
+  }
+]);
+const setTime = () => {
+  let date1 = new Date();
+  let year: any = date1.getFullYear();
+  let month: any = date1.getMonth() + 1;
+  let day: any = date1.getDate();
+  let hours: any = date1.getHours();
+  if (hours < 10) {
+    hours = '0' + hours;
+  }
+  let minutes: any = date1.getMinutes();
+  if (minutes < 10) {
+    minutes = '0' + minutes;
+  }
+  let seconds: any = date1.getSeconds();
+  if (seconds < 10) {
+    seconds = '0' + seconds;
+  }
+  date.value.ymd = year + '-' + month + '-' + day;
+  date.value.hms = hours + ':' + minutes + ':' + seconds;
+  date.value.week = date1.getDay();
+};
+// 添加定时器，每秒更新一次时间
+const timer = setInterval(setTime, 1000);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
 
-<style scoped></style>
+<style scoped lang="scss">
+$vm_base: 1920;
+$vh_base: 1080;
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+.header {
+  width: 100%;
+  height: 8vh;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+.header-left {
+  padding-left: vw(40);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > div {
+    width: vw(240);
+    margin-right: vw(20);
+  }
+}
+.header-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Rang_men_zheng_title;
+  font-size: vw(32);
+  letter-spacing: vw(8);
+}
+.header-right {
+  padding-right: vw(20);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: vw(15);
+  .left-section {
+    display: flex;
+    align-items: center;
+    padding-right: vw(20);
+    //   margin-right: auto; /* 让右侧元素（管理系统）居右 */
+  }
+  .left-section img {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px; /* 图标与文字间距 */
+  }
+}
+</style>

src/views/ueScreen/index.vue

@@ -9,7 +9,17 @@ import Header from './components/header.vue';
 </script>
 
 <style scoped lang="scss">
-@import '@/views/ueScreen/gis.scss';
+$vm_base: 1920;
+$vh_base: 1080;
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
 .ueScreen {
   width: 100vw;
   height: 100vh;