pay-customer/src/pages/index/components/AiInput.vue

<template>
  <view class="ai_contents">
    <view class="ai_contents_center">
      <view class="ai_contents_header">
        <image src="/static/svg/ai_icon.svg" mode="heightFix" />
        <text>HI，遇到什么问题了，可以问我哦～ </text>
      </view>
      <button open-type="contact">
        <view class="ai_contents_input">
          <view class="ai_input">
            点击联系在线客服
            <!-- <input placeholder="点击输入聊天内容" placeholder-style="font-size: 26rpx;color:#999;" /> -->
          </view>
          <uni-icons
            @click="handleInputChange"
            type="arrow-right"
            size="20"
            color="#666"
          ></uni-icons>
        </view>
      </button>
      <view class="ai_footer">
        <scroll-view scroll-x="true" style="height: 80rpx">
          <view class="items">
            <view class="items_center">
              <image src="/static/svg/FWJF.svg" mode="heightFix" />
              房屋缴费
            </view>
          </view>
          <view class="items">
            <view class="items_center">
              <image src="/static/svg/GDCX.svg" mode="heightFix" />
              工单查询
            </view>
          </view>
          <view class="items">
            <view class="items_center">
              <image src="/static/svg/FWJF.svg" mode="heightFix" />
              房屋绑定
            </view>
          </view>
          <view class="items">
            <view class="items_center">
              <image src="/static/svg/QBGL.svg" mode="heightFix" />
              钱包
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { showToast } from '@/common/libraries/naviHelper'
import { getStyleColorInfo, getStyleColorValueInfo } from '@/common/libraries/getPageConfig'
const handleInputChange = () => {
  showToast('该功能在当前项目暂未开放，敬请期待！')
}
</script>

<style lang="scss" scoped>
.ai_contents {
  background-color: #fff;
  padding: 6rpx;
  border-radius: 20rpx;
  height: 320rpx;
  margin: 30rpx;
  .ai_contents_center {
    border-radius: 20rpx;
    background:
      linear-gradient(307deg, rgb(255, 137, 24, 0.06) -1%, rgba(255, 255, 255, 0) 29%),
      linear-gradient(243deg, rgb(75, 72, 255, 0.06) 1%, rgba(255, 255, 255, 0) 20%),
      linear-gradient(303deg, rgba(255, 255, 255, 0) 71%, rgb(40, 26, 255, 0.08) 100%),
      linear-gradient(
        231deg,
        rgba(255, 255, 255, 0) 76%,
        rgba(255, 105, 0, 0.06) 98%,
        rgb(255, 145, 68, 0.06) 98%
      );
    width: 100%;
    height: 100%;
    button {
      padding: 0;
      margin: 0 30rpx;
      text-align: left;
      display: flex;
      align-items: center;

      background-color: transparent;
      height: 90rpx;
      border-radius: 100rpx;
      box-shadow: 0px 4px 10px 3px rgba(231, 231, 231, 0.3);
    }
  }
  .ai_contents_header {
    display: flex;
    align-items: center;
    padding: 30rpx;
    color: #333;
    font-size: 30rpx;
    image {
      width: 52rpx;
      height: 52rpx;
    }
    text {
      padding-left: 20rpx;
    }
  }
  .ai_contents_input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 100rpx;
    padding: 0 20rpx;
    width: 100%;
    .ai_input {
      flex: 1;
      font-size: 28rpx;
      color: #666;
      input {
        height: 100%;
      }
    }
  }
  .ai_footer {
    padding: 30rpx 0 0 0;
    white-space: nowrap;
    .items {
      background-color: #fff;
      box-shadow: 0px 0px 6px 3px rgba(199, 199, 199, 0.1);
      border-radius: 10rpx;
      display: inline-block;
      height: 70rpx;
      color: #3d3d3d;
      font-size: 24rpx;
      padding: 0 20rpx;
      margin-right: 15rpx;
      &:first-child {
        margin-left: 30rpx;
      }
      &:last-child {
        margin-right: 30rpx;
      }
      .items_center {
        display: flex;
        align-items: center;
        height: 100%;
      }
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
}
</style>