technique_web/src/views/home/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <cHead @selectMenu="selectMenu" :activeKey="current">
          <template v-slot:info>
            <component v-show="current == 'home'" :is="home"> </component>
            <component v-show="current == 'brain'" :is="brain"> </component>
            <component v-show="current == 'news'" :is="news"> </component>
            <component v-show="current == 'demand'" :is="demand"> </component>
            <component v-show="current == 'achievement'" :is="achievement"> </component>
            <component v-show="current == 'innovation'" :is="innovation"> </component>
          </template>
        </cHead>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog" title="智能客服">
      <el-col :span="24" class="dialog">
        <div class="content">
          <div class="title">智能客服为您服务</div>
          <div class="list">
            <el-image class="image" :src="kf" fit="fill" />
            <div class="message">Hi，遇到问题随时找智能客服哟～ 有什么需要我帮忙的吗？</div>
          </div>
        </div>
        <div class="foot">
          <textarea class="input" placeholder="输入消息"></textarea>
          <div class="button">
            <div class="send">发 送</div>
          </div>
        </div>
      </el-col>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
// 图片引入
import kf from '@/assets/kf.png';
// 接口
// import { ToolsStore } from '@/stores/tool';
// import type { IQueryResult } from '@/util/types.util'
// const toolsAxios = ToolsStore();
// 组件
import home from './components/home.vue';
import brain from './components/brain.vue';
import news from './components/news.vue';
import demand from './components/demand.vue';
import achievement from './components/achievement.vue';
import innovation from './components/innovation.vue';

// 路由
const route = useRoute();
// 加载中
const loading: Ref<any> = ref(false);
const current = ref(localStorage.getItem('href') || 'home'); // 创建一个响应式数据;
// 是否弹框客服
const dialog: Ref<any> = ref(false);
// 请求
onMounted(async () => {
  loading.value = true;
  search();
  loading.value = false;
});
const search = async () => {
  // let res: IQueryResult = await toolsAxios.dataCount();
  // if (res.errcode == '0') {
  //   info.value = res.data;
  // }
};
// 菜单选择
const selectMenu = async (item) => {
  current.value = item;
  localStorage.setItem('href', item);
};
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 0 !important;
}

.dialog {
  .content {
    padding: 20px;

    .title {
      padding-top: 23px;
      padding-bottom: 26px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }

    .list {
      display: flex;
      align-items: center;

      .image {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        margin: 0 10px 0 0;
      }

      .message {
        position: relative;
        max-width: 330px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 22px;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.65);
        padding: 16px 11px 16px 16px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.12);
      }
    }
  }

  .foot {
    height: 140px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 13px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .input {
      flex: 1;
      height: 0;
      resize: none;
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      line-height: 22px;
    }

    .button {
      margin-top: 8px;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      .send {
        cursor: pointer;
        color: #fff;
        background: #2f54eb;
        border-radius: 4px;
        width: 64px;
        height: 32px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>