storevisit-ui-mobile/src/views/chatAIPage/index.vue

<template>
  <div class="chatAIPage">
    <div class="header">
      <div class="icon"><van-icon name="flower-o" size="25" /></div>
      <div class="titleTip">欢迎进入随身邦chatBl，智能助理为您提供以下服务</div>
    </div>
    <div class="content">
      <div class="tabItem" v-for="item in tabData" :style="{ background: item.backColor }">
        <div class="tabName">{{ item.tabName }}</div>
        <div class="message">{{ item.message }}</div>
        <div class="icon">
          <van-icon :name="item.icon" size="45" />
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="tip">对话发起</div>
      <div class="chatBox">
        <van-field
          v-model="chatBoxMessage"
          rows="3"
          type="textarea"
          :border="true"
          placeholder="【随身邦chatBl】将与您对话，请输入…." />
        <van-icon name="guide-o" class="sendIcon" size="40" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'chatAIPage',
  data() {
    return {
      tabData: [
        {
          tabName: '指标查询',
          message: '帮助您用自然语言查询指标、支持多条件组合查询',
          icon: 'bar-chart-o',
          backColor: '#665bb9',
        },
        {
          tabName: '门店圈选',
          message: '帮助您使用自然语言进行筛选，支持多条件组合筛选',
          icon: 'list-switching',
          backColor: '#68a3e7',
        },
      ],
      chatBoxMessage: '',
    };
  },
};
</script>
<style lang="scss" scoped>
.chatAIPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    .icon {
      color: #666;
    }
    .titleTip {
      font-size: 14px;
      color: #666;
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    .tabItem {
      width: 48%;
      float: left;
      margin-right: 4%;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      padding: 10px;
      color: #fff;
      border-radius: 15px;
      &:nth-child(even) {
        margin-right: 0;
      }
      .tabName {
        font-size: 16px;
        margin-bottom: 10px;
      }
      .message {
        font-size: 14px;
        margin-bottom: 15px;
      }
      .icon {
        text-align: center;
        margin-bottom: 20px;
      }
    }
  }
  .footer {
    .tip {
      font-size: 16px;
      padding: 10px;
    }
    .chatBox {
      position: relative;
      .van-cell {
        padding-bottom: 30px;
      }
      .sendIcon {
        position: absolute;
        right: 3px;
        bottom: 0px;
        color: #999;
      }
    }
  }
}
</style>