big-model-wechat/src/components/chat/ChatWelcome.vue

<script setup>
defineProps({
  title: {
    type: String,
    default: ""
  },
  cardTitle: {
    type: String,
    default: ""
  },
  subTitle: {
    type: Array,
    default: () => []
  },
  cardContent: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <view class="chat-welcome">
    <view class="weclome-inner">
      <TheSvgIcon src="icon-logo" size="136"></TheSvgIcon>
      <Text class="title">{{ title }}</Text>
      <Text class="desc" v-for="item, index in subTitle" :key="index">{{ item }}</Text>
    </view>

    <view class="recommend-inner">
      <view class="question-card">
        <text class="title">{{ cardTitle }}</text>
        <view class="list">
          <view class="item" v-for="item in cardContent" :key="item.id">
            <text class="text">{{ item.question }}</text>
            <TheSvgIcon src="icon-right-arrow" size="28"></TheSvgIcon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.chat-welcome {
  .weclome-inner {
    display: flex;
    align-items: center;
    flex-flow: column;
    padding: 0rpx 0 72rpx 0;
    text-align: center;

    .title {
      margin: 16rpx 0;
      background: linear-gradient(90deg, #5C6883 0%, #212121 100%);
      background-clip: text;
      font-weight: bold;
      font-size: 36rpx;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .desc {
      font-size: 24rpx;
      line-height: 44rpx;
      color: #7B909C;
    }
  }

  .recommend-inner {
    padding: 0 64rpx 0 22rpx;

    .question-card {
      padding: 40rpx 34rpx 20rpx 34rpx;
      border-radius: 4rpx 30rpx 30rpx 30rpx;
      background: #fff;
      font-size: 28rpx;
      font-weight: bold;

      .title {
        background: var(--, linear-gradient(92deg, #5ABBF2 12.24%, #2454FF 63.2%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .list {
        color: #212121;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32rpx 0;

          .text {
            padding-right: 60rpx;
            line-height: 48rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; 
            -webkit-box-orient: vertical;
          }

          &:not(:last-child) {
            border-bottom: 1px solid #F6F6F6;
          }
        }
      }
    }
  }
}
</style>