Merge remote-tracking branch 'origin/dev_ai' into ywx

yaowanxin

2025-08-12 a0dd2bd1be4e97a93443a48b86c719930d0a268a

 src/views/chatHome/chatHomeIndex/home.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,175 @@
<template>
<div class="home">
    <div style="background: white;color: black;font-size: 30px;" class="logo">
        <div class="logo-one" style="font-weight: bold">
<!--            <img src="/src/assets/img/logo.png" style="width: 50px;height: 50px;margin: 0 10px" />-->
            <div><i>大模型AI小智正在为您服务</i></div>
        </div>
        <div class="input">
            <input type="text" v-model="keyWord" class="input-text" placeholder="给小智发送消息"  @keyup.enter="sendMsg" />
            <div style="font-size: 13px;color: #808080;display: flex;justify-content: space-between;padding: 10px;">
                <div style="display: flex;justify-content: center;align-items: center;">
<!--                    <div style="display: flex;justify-content: center;align-items: center;">-->
<!--                        <img src="/src/assets/img/logo.png" style="width: 15px;height: 15px;margin: 0 5px" />-->
<!--                        <span>深度思考(R1)</span>-->
<!--                    </div>-->
<!--                    <div style="display: flex;justify-content: center;align-items: center;">-->
<!--                        <img src="/src/assets/img/logo.png" style="width: 15px;height: 15px;margin: 0 5px" />-->
<!--                        <span>联网搜索</span>-->
<!--                    </div>-->
                </div>
                <div style="display: flex;justify-content: center;align-items: center;margin-right: 5px;">
<!--                    <img src="/src/assets/img/logo.png" style="width: 25px;height: 25px;margin: 0 5px" />-->
                    <img src="@/assets/img/emoji/rocket.png" style="width: 25px;height: 25px;margin: 0 5px" @click="sendMsg"/>
                </div>
            </div>
        </div>
        <div style="width: 780px;">
            <div style="font-weight: bold;margin: 30px 0;">热门推荐</div>
            <div class="keywords">
                <div class="keywordss" @click="sendMsgDefault(keyWordOne)">
                    <p class="fontSize aaa">{{keyWordOne}}</p>
                    <p class="fontSize">阀门、管道或容器密封失效导致气体泄漏（如氯气、氨气）。</p>
                    <p class="fontSize">后果：中毒、爆炸、环境污染。</p>
                </div>
                <div class="keywordss" @click="sendMsgDefault(keyWordTwo)">
                    <p class="fontSize aaa">{{keyWordTwo}}</p>
                    <p class="fontSize">钢瓶或罐体因材料疲劳、腐蚀或超压破裂</p>
                    <p class="fontSize">原因：未定期检测、违规充装或外部撞击。。</p>
                </div>
            </div>
            <div class="keywords">
                <div class="keywordss" @click="sendMsgDefault(keyWordFive)">
                    <p class="fontSize aaa">{{keyWordFive}}</p>
                    <p class="fontSize">装卸过程中违规操作（如野蛮搬运、混装禁忌物质）。</p>
                    <p class="fontSize">运输途中未固定容器，导致碰撞或倾倒。</p>
                </div>
                <div class="keywordss" @click="sendMsgDefault(keyWordSix)">
                    <p class="fontSize aaa">{{keyWordSix}}</p>
                    <p class="fontSize">缺乏泄漏应急预案，人员培训不足。</p>
                    <p class="fontSize">救援设备（如防毒面具、堵漏工具）缺失或失效。</p>
                </div>
            </div>
            <div class="keywords">
                <div class="keywordss" @click="sendMsgDefault(keyWordServen)">
                    <p class="fontSize aaa">{{keyWordServen}}</p>
                    <p class="fontSize">未取得运输资质（如ADR/RID等国际规范）。</p>
                    <p class="fontSize">路线规划不合规（如穿越人口密集区）。</p>
                </div>
                <div class="keywordss" @click="sendMsgDefault(keyWordEight)">
                    <p class="fontSize aaa">{{keyWordEight}}</p>
                    <p class="fontSize">传感器部署（如红外气体探测器、电化学传感器）。</p>
                    <p class="fontSize">实时数据传输至监控平台，触发报警。</p>
                </div>
            </div>
        </div>
    </div>

    <div></div>
</div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import {useRoute,useRouter} from "vue-router"
const route = useRoute();
const router = useRouter();
const keyWord = ref('');
const keyWordOne = ref('危险气体泄漏怎么办');
const keyWordTwo = ref('运输容器失效怎么办');
const keyWordFive = ref('操作不当怎么办');
const keyWordSix = ref('应急响应不足怎么办');
const keyWordServen = ref('合规性问题');
const keyWordEight = ref('泄漏监测技术有哪些');

const sendMsg = () => {
    router.push({ path: '/main/MobileChat',query:{ keyWord: keyWord.value} })
}

const sendMsgDefault = (value) => {
    router.push({ path: '/main/MobileChat',query:{ keyWord: value} })
}

</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 91vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 99;
    width: 100%;
    height: 100%;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    background-color: #F0F6F9;

    .keywords {
      display: flex;
      width: 100%;
      height: 90px;
      line-height: 80px;
      justify-content: space-between;
      margin: 10px 0;

      .keywordss {
        box-shadow: 0px 2px 5px #b8b8b8;
        width: 48%;
        background: #e0edfc;
        border-radius: 10px;

        .aaa {
          font-weight: bold;
          font-size: 15px !important;
        }

        .fontSize {
          font-size: 13px;
          height: 20px;
          line-height: 20px;
          margin: 6px;
        }
      }
    }

    .logo-one {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }

    .input {
      width: 780px;
      height: 150px;
      background: #f5f4f4;
      border-radius: 20px;

      .input-text {
        font-size: 18px;
        width: 568px;
        border-radius: 20px 20px 0 0;
        height: 90px;
        padding-left: 10px;
        border: none;
        color: black;
        background-color: #f5f4f4;
      }

      .input-text:focus {
        outline: none;
        border: none;
      }
    }
  }
}
</style>