安装适配样式的插件和配置vite+调整页面样式

haoxuan

2024-01-22 a411e6a6e8baf3a0f0ebf6255f312669903d3754

 src/views/dashboard/components/DashboardTitle.vue

@@ -1,35 +1,37 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">
      智能工作台 —
      <el-popover placement="bottom" :width="200" trigger="click" :content="currentDeviceName">
        <template #reference>
          <el-text truncated class="device-name">{{ currentDeviceName }}</el-text>
        </template>
      </el-popover>
      <el-icon size="32" color="#0db7f5" style="margin-left: 4px; cursor: pointer" @click="openDevicesModal">
        <IconSlider></IconSlider>
      </el-icon>
    <div class="title-text-box">
      <div class="title-text">
        <span> 智能工作台 —</span>
        <el-popover placement="bottom" :width="180" trigger="click" :content="currentDeviceName">
          <template #reference>
            <el-text truncated class="device-name">{{ currentDeviceName }}</el-text>
          </template>
        </el-popover>
        <el-icon class="text-icon" color="#0db7f5" @click="openDevicesModal">
          <IconSlider></IconSlider>
        </el-icon>
      </div>
    </div>
    <div class="title-status">
      <div class="connection-info" @click="openProblemsModal">
        <el-icon size="26" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
        <el-icon class="size_26" :color="problemsIconStatus ? '#00ff00' : '#ff0000'">
          <AlertLightIcon></AlertLightIcon>
        </el-icon>
      </div>
      <div class="cloud-connection-status">
        <el-icon v-if="cloudConnectionIconStatus" size="38" color="#00ff00">
        <el-icon v-if="cloudConnectionIconStatus" class="size_38" color="#00ff00">
          <IconCloudDone></IconCloudDone>
        </el-icon>

        <el-icon v-else size="38" color="#ff0000">
        <el-icon v-else class="size_38" color="#ff0000">
          <IconCloudOff></IconCloudOff>
        </el-icon>
      </div>

      <div class="reporting-record">
        <el-icon
          size="26"
          class="size_26"
          :color="taskStore.activeTask ? '#0db7f5' : '#c0c0c0'"
          :style="{ 'margin-right': '10px', cursor: taskStore.activeTask ? 'pointer' : 'not-allowed' }"
          @click="openReportingRecord"
@@ -39,7 +41,7 @@
      </div>

      <div class="params-config" @click="openConfigModal">
        <el-icon size="28"><Setting /></el-icon>
        <el-icon class="size_28"><Setting /></el-icon>
      </div>
    </div>
  </div>
@@ -161,14 +163,43 @@
<style scoped lang="scss">
.dashboard-title {
  position: relative;
  height: 100%;
}
.title-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
.el-icon.size_28 {
  font-size: 28px;
}
.size_26 {
  font-size: 26px;
}
.size_38 {
  font-size: 38px;
}
.title-text-box {
  width: calc(100% - 150px);
  height: 100%;

  .title-text {
    // display: flex;
    width: 450px;
    height: 100%;
    margin: 0 auto;
    margin-left: 24%;
    align-items: center;
    line-height: 68px;
    // justify-content: center;
    font-size: 34px;
    font-weight: 700;
    span {
      float: left;
    }
    .text-icon {
      font-size: 32px;
      margin-left: 4px;
      cursor: pointer;
    }
  }
}

.title-status {
  display: flex;
  align-items: center;
@@ -181,7 +212,7 @@
  cursor: pointer;
}
.device-name {
  max-width: 220px;
  max-width: 180px;
  font-size: 40px;
  color: #fff;
}