epmet-apartment-pc/src/views/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :span="16"
        ><div class="grid-content-l el-mb-5">
          <div class="el-flex el-mb-4">
            <div
              class="el-flex el-flex-center el-flex-y-center bt-l"
              :class="{ active: activeTab === 'talent' }"
              @click="setActive('talent')"
            >
              查人才
            </div>
            <div
              class="el-flex el-flex-center el-flex-y-center el-ml-6 bt-r"
              :class="{ active: activeTab === 'house' }"
              @click="setActive('house')"
            >
              查房屋
            </div>
          </div>
          <!-- 人才显示 -->
          <div class="el-flex" v-if="activeTab === 'talent'">
            <el-input
              placeholder="  输入姓名/联系电话/证件号查询"
              v-model="input2"
            >
            </el-input>
            <el-button type="primary">查询</el-button>
          </div>
          <!-- 房屋显示 -->
          <div class="el-flex" v-if="activeTab === 'house'">
            <el-input
              placeholder="   输入小区名称/楼栋/房间号查询"
              v-model="input2"
            >
            </el-input>
            <el-button type="primary">查询</el-button>
          </div>
        </div>
        <!-- 工作台 -->
        <div class="work-content">
          <CommonTitle>工作台</CommonTitle>
          <el-row gutter="10" class="el-mt-5">
            <el-col
              v-for="(item, index) in workbenchItems"
              :key="index"
              :span="4"
              ><div
                class="el-flex el-flex-center el-flex-y-center single"
                :style="{ backgroundColor: item.color }"
              >
                <!-- <el-image  style="width:28px; height: 33px" :src="item.icon" ></el-image> -->
                <img
                  style="width: 28px; height: 33px"
                  :src="item.icon"
                  alt=""
                />
                {{ item.label }}
              </div></el-col
            >
          </el-row>
        </div>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="8"><div class="grid-content-r">2</div></el-col>
    </el-row>
    <el-divider />
  </div>
</template>

<script>
import { color } from "echarts";
import CommonTitle from "./components/CommonTitle.vue";
export default {
  name: "Index",
  components: {
    CommonTitle,
  },
  data() {
    return {
      // 记录当前激活的标签
      activeTab: "talent",
      // 工作台数据
      workbenchItems: [
        {
          label: "入住办理",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#fbd5d5",
        },
        {
          label: "退房办理",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#c2e2f9",
        },
        {
          label: "入住预约",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#fbedc8",
        },
        {
          label: "看房预约",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#eceeed",
        },
        {
          label: "退房提醒",
          icon:require("../assets/images/antFill-phone.png"),
          color: "#fdddf1",
        },
        {
          label: "报修提醒",
          icon: require("../assets/images/antFill-phone.png"),
          color: "#fbedc8",
        },
      ],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 设置当前激活的标签
    setActive(tab) {
      console.log(tab);

      this.activeTab = tab;
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #f7f7f7;
  .grid-content-l {
    background-color: #fff;
    padding: 30px 20px;
  }
  .grid-content-r {
    background-color: #fff;
    // padding: 30px 20px;
  }
  .bt-l {
    width: 104px;
    height: 40px;
  }
  .bt-r {
    width: 104px;
    height: 40px;
    // margin-left: 30px;
  }
  .active {
    background-color: rgba(12, 94, 232, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px; // 调整下三角位置
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(12, 94, 232, 1); // 下三角颜色
    }
  }
  .work-content {
    background-color: #fff;
    padding-left: 14px ;
    .single {
      height: 52px;
    }
  }
}
</style>