multimedia-portal/src/views/ServiceExchange.vue

<script setup>
import {reactive, ref} from "vue";
import ServiceItem from "@/components/service/serviceItem.vue";

const activeName=ref('first')
const handleClick=()=>{

}
const docList=reactive([
  {docName:'LX圆形阵列麦克风开发板产品手册'},
  {docName:'PH-AIMIC01 AI会议麦克风产品手册'},
  {docName:'PH-AIMIC01 AI会议麦克风产品手册'},
])

// 新增表单相关数据和验证规则
// 表单数据对象
const form = reactive({
  name: '',      // 您的姓名
  phone: '',     // 联系电话
  company: '',   // 公司名称
  email: '',     // 邮箱地址
  feedback: '',  // 反馈内容
  captcha: ''    // 验证码
})

// 表单验证规则
const rules = reactive({
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
})

// 表单引用，用于表单验证
const formRef = ref()

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行提交逻辑
      console.log('表单提交:', form)
      // 这里可以添加实际的提交代码，比如调用API
    } else {
      // 表单验证失败
      return false
    }
  })
}

// 生成随机验证码
const captchaValue = ref('')
// 生成验证码的函数
const generateCaptcha = () => {
  // 生成4位随机数字
  const randomNum = Math.floor(1000 + Math.random() * 9000)
  captchaValue.value = randomNum.toString()
}

// 页面加载时生成初始验证码
generateCaptcha()
</script>

<template>
  <div class="header">
    <img src="@/assets/img/service-top.png" alt="">
  </div>
  <div class="content">
    <el-tabs v-model="activeName" class="demo-tabs service-tab" @tab-click="handleClick">
      <el-tab-pane label="产品文档" name="first">
        <div class="first-content">
          <ServiceItem
              v-for="item in docList"
              :itemName="item.docName"
          ></ServiceItem>
        </div>
      </el-tab-pane>
      <el-tab-pane label="技术交流" name="second">
3
      </el-tab-pane>
      <el-tab-pane label="客户反馈" name="third">
        <div class="feedback-form-container">
          <!-- 客户反馈表单 -->
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-position="top"
            class="feedback-form"
          >
            <!-- 第一行：您的姓名和联系电话 -->
            <div class="form-row">
              <el-form-item label="您的姓名" prop="name" class="form-item">
                <el-input v-model="form.name" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phone" class="form-item">
                <el-input v-model="form.phone" placeholder=""></el-input>
              </el-form-item>
            </div>

            <!-- 第二行：公司名称和邮箱地址 -->
            <div class="form-row">
              <el-form-item label="公司名称" prop="company" class="form-item">
                <el-input v-model="form.company" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email" class="form-item">
                <el-input v-model="form.email" placeholder=""></el-input>
              </el-form-item>
            </div>

            <!-- 第三行：反馈内容（独占一行） -->
            <div class="form-row">
              <el-form-item label="反馈内容" prop="feedback" class="form-item">
                <el-input
                    v-model="form.feedback"
                    type="textarea"
                    :rows="5"
                    placeholder=""
                ></el-input>
              </el-form-item>
            </div>


            <!-- 第四行：验证码（独占一行，水平排列） -->
            <el-form-item label="验证码输入" prop="captcha" label-position="left" class="captcha-item">
              <!-- 验证码容器，用于将输入框和图片包裹在一个框里 -->
              <div class="captcha-container">
                <el-input
                  v-model="form.captcha"
                  class="captcha-input"
                  placeholder="请输入"
                ></el-input>
                <!-- 验证码图片 -->
                <div class="captcha-image" @click="generateCaptcha">
                  {{ captchaValue }}
                </div>
              </div>
            </el-form-item>

            <!-- 提交按钮 -->
            <el-form-item >
              <el-button type="primary" @click="submitForm" class="submit-btn">
                提交反馈
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="less">
.header{
  width: 100%;
  img{
    width: 100%;
    object-fit: cover;
    display: block;
  }
}
.first-content{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 新增表单样式 */
.feedback-form-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.feedback-form {

  .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    /* 将所有输入框的背景色改为#F5F5F5，包括输入框容器 */
    --el-component-size: 39px;
    :deep(.el-input),
    :deep(.el-textarea) {
      background-color: #F5F5F5;
      /* 移除默认的padding，解决两端白色问题 */
      padding: 0 1px;
      border-radius: 4px;
      overflow: hidden;
    }
    :deep(.el-form-item__label){
      font-weight: 400;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 0.06em;
    }
    /* 将所有输入框的背景色改为#F5F5F5 */
    :deep(.el-input__inner) {
      background-color: #F5F5F5;
      /* 确保输入框内部没有多余的边框 */
      border: none;
      /* 设置内边距 */
      padding: 0 15px;
    }
    :deep(.el-input__wrapper){
      padding: 0;
      width: 338px;
      height: 37px;
    }
    /* 文本域的背景色也改为#F5F5F5 */
    :deep(.el-textarea__inner) {
      background-color: #F5F5F5;
      height: 100%;
      /* 确保文本域内部没有多余的边框 */
      border: none;
    }
    .form-item {
      flex: 1;
    }
  }

  /* 验证码样式 */
  .captcha-item {
    /* 调整验证码label的位置和宽度 */
    :deep(.el-form-item__label){
      //width: 60px;
      margin-right: 10px;
      font-weight: 400;
      font-size: 18px;
      line-height: 32px;
      color: #000;
    }
    :deep(.el-input),
    :deep(.el-textarea) {
      /* 移除默认的padding，解决两端白色问题 */
      padding: 0 5px;
      border-radius: 4px;
      overflow: hidden;
    }
    /* 验证码容器，将输入框和图片包裹在一个框里 */
    .captcha-container {
      display: flex;
      align-items: center;
      //background-color: #F5F5F5;
      border-radius: 4px;
      border: 1px solid #E0E0E0;
      overflow: hidden;
      width: fit-content;
    }

    .captcha-input {
      width: 120px;
      /* 确保输入框容器没有背景和边框，由外层容器统一控制 */
      :deep(.el-input) {
        background-color: transparent;
        border: none;
        padding: 0 10px;
      }

      /* 确保输入框内部没有边框 */
      :deep(.el-input__inner) {
        border: none;
        //border-right: 1px solid #E0E0E0; /* 仅保留右侧分隔线 */
        border-radius: 0; /* 移除输入框自身的圆角 */
      }

      /* 确保输入框包装器没有多余样式 */
      :deep(.el-input__wrapper) {
        width: 120px;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
      }
    }

    /* 验证码图片样式 */
    .captcha-image {
      width: 100px;
      height: 32px;
      //background-color: #F5F5F5; /* 与输入框背景色一致 */
      border: none; /* 移除所有边框 */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
      user-select: none;
    }
  }

  .submit-btn {
    margin: 20px auto;
    width: 252px;
    height: 55px;
    border-radius: 116px;
    background-color: #307EF4;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    color: #fff;
    border: none;
  }
}
</style>
<style lang="less" >
.el-tabs{
  --el-color-primary: #282828;
  --el-text-color-primary: #D3BEBE;
  --el-color-black:#D3BEBE;
}
.service-tab{
  .el-tabs__content {
    display: flex;
    justify-content: center;
    color: #6b778c;
    padding: 20px;
    min-height: 800px;
    .el-tab-pane{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }
  }
  .el-tabs__nav-scroll{
    display: flex;
    justify-content: center;
    .el-tabs__item{
      font-weight: 500;
      font-size: 24px;
      line-height: 100%;
      letter-spacing: 0.06em;
      margin:20px;
    }
  }
}
</style>