<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
import Frame_1 from '/images/Frame_1.png'
import Frame_2 from '/images/Frame_2.png'

const router = useRouter()
function handleBack() {
  router.back()
}
</script>

<template>
  <div>
    <div class="h-77px flex items-center justify-between bg-white px-20px">
      <div class="w-1/2 flex items-center justify-between">
        <div class="flex items-center">
          <el-icon class="mr-30px cursor-pointer" size="29" @click="handleBack">
            <ArrowLeftBold />
          </el-icon>
          <span class="text-24px"> 定制专属音色</span>
        </div>
      </div>
    </div>
    <div>
      <div class="mb-32px mt-63px text-center text-24px text-hex-3f3f44">
        套餐服务
      </div>
      <div class="w-full px-120px">
        <table width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td />
            <td>精简套餐</td>
            <td>标准套餐</td>
            <td>精品套餐</td>
          </tr>
          <!-- <tr>
            <td>价格</td>
            <td>5万元起</td>
            <td>20万元起</td>
            <td>30万元起</td>
          </tr> -->
          <tr>
            <td>部署方式</td>
            <td>公共云/私有化</td>
            <td>公共云/私有化</td>
            <td>公共云/私有化</td>
          </tr>
          <tr>
            <td>签约声优</td>
            <td>不提供</td>
            <td>提供</td>
            <td>提供</td>
          </tr>
          <tr>
            <td>专业录音棚</td>
            <td>提供</td>
            <td>提供</td>
            <td>提供</td>
          </tr>
          <tr>
            <td>文案设计</td>
            <td>不提供</td>
            <td>2000句</td>
            <td>5000句</td>
          </tr>
          <tr>
            <td>录音监听师</td>
            <td>提供</td>
            <td>提供</td>
            <td>提供</td>
          </tr>
          <tr>
            <td>数据标注</td>
            <td>2小时</td>
            <td>2小时</td>
            <td>5小时</td>
          </tr>
          <tr>
            <td>模型训练</td>
            <td>提供</td>
            <td>提供</td>
            <td>提供</td>
          </tr>
          <tr>
            <td>样音生成</td>
            <td>5条</td>
            <td>5条</td>
            <td>10条</td>
          </tr>
          <tr>
            <td>增加情感</td>
            <td>不提供</td>
            <td>+3万元/感情</td>
            <td>+3万元/感情</td>
          </tr>
          <tr>
            <td>效果调优</td>
            <td>不提供</td>
            <td>1次</td>
            <td>2次</td>
          </tr>
          <tr>
            <td />
            <td class="py-20px">
              <div class="h-40px">
                点击下方按钮联系我们
              </div>
              <el-button type="primary" class="h-48px w-114px">
                联系我们
              </el-button>
            </td>
            <td class="py-20px">
              <div class="h-40px">
                点击下方按钮联系我们
              </div>
              <el-button type="primary" class="h-48px w-114px">
                联系我们
              </el-button>
            </td>
            <td class="py-20px">
              <div class="h-40px">
                点击下方按钮联系我们
              </div>
              <el-button type="primary" class="h-48px w-114px">
                联系我们
              </el-button>
            </td>
          </tr>
        </table>
        <div class="mb-30px mt-63px text-center">
          <div class="mb-5px text-24px leading-33px text-hex-3f3f44">
            定制流程
          </div>
          <div class="text-14px leading-20px text-hex-3f3f44">
            模型生产环节最短仅需15工作日
          </div>
        </div>
        <div class="h-161px border-2 border-hex-ebecec bg-white pt-40px">
          <el-steps align-center>
            <el-step
              title="需求沟通"
              description="场景沟通、风格确定、声优选择"
            />
            <el-step
              title="合同签署"
              description="签合同、明确周期、交付标准"
            />
            <el-step
              title="声音录制"
              description="文案设计、进棚录音"
            />
            <el-step
              title="模型生产"
              description="数据标注、模型训练、样音生成"
            />
            <el-step
              title="交付验收"
              description="模型优化、客户验收"
            />
          </el-steps>
        </div>
        <div class="h-900px">
          <div
            class="mb-28px mt-63px text-center text-24px leading-33px text-hex-3f3f44"
          >
            样音试听
          </div>
          <div class="h-680px rounded-8px bg-hex-181919">
            <ul>
              <li>
                <div class="text-hex-fdcb9e">
                  标准女声
                </div>
                <div>
                  <span class="text-hex-fdcb9e"> 样音试听 </span>
                </div>
              </li>
              <li>
                <div>（精简版16K）我们的项目终于有新进展啦。</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_1" alt="">
                  <span> 中规中矩</span>
                </div>
              </li>
              <li>
                <div>（标准版16K）我们的项目终于有新进展啦。</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_1" alt="">
                  <span> 发音平稳</span>
                </div>
              </li>
              <li>
                <div class="text-hex-fdcb9e">
                  （精品版16K）我们的项目终于有新进展啦。
                </div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_2" alt="">
                  <span class="text-hex-fdcb9e"> 情感丰富</span>
                </div>
              </li>
              <li>
                <div>（精品版48K）我们的项目终于有新进展啦。</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_1" alt="">
                  <span> 亲切温柔</span>
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div class="text-hex-fdcb9e">
                  标准女声
                </div>
                <div>
                  <span class="text-hex-fdcb9e"> 样音试听 </span>
                </div>
              </li>
              <li>
                <div>（精简版16K）好像吹来一股甜滋滋清凉凉的风！</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_1" alt="">
                  <span> 中规中矩</span>
                </div>
              </li>
              <li>
                <div>（标准版16K）好像吹来一股甜滋滋清凉凉的风！</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_1" alt="">
                  <span> 发音平稳</span>
                </div>
              </li>
              <li>
                <div>（精品版16K）好像吹来一股甜滋滋清凉凉的风！</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_2" alt="">
                  <span> 情感丰富</span>
                </div>
              </li>
              <li>
                <div>（精品版48K）好像吹来一股甜滋滋清凉凉的风！</div>
                <div class="flex items-center">
                  <img class="mr-14px" :src="Frame_1" alt="">
                  <span>  声音立体</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="json">
  {
    "meta":{
      "hidden": true,
      "hideLayout": true
    }
  }
</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";

.bg {
  background: #cceabb;
}

table {
  width: 100%;
  height: 861px;
  margin: 0 auto;
  border: 2px solid #ebecec;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;

  tr {
    line-height: 60px;
    &:first-child {
      height: 90px;
      background: #f6fff1;
      td {
        font-size: 20px;
        border-bottom: 1px solid transparent;
      }
    }
    &:nth-child(2) {
      td {
        border-top: 1px solid transparent;
      }
    }
    td {
      border: 1px solid #ebecec;
      box-sizing: border-box;
      color: #3f3f44;
      font-size: 14px;
      text-align: center;
      width: 25%;
    }
  }
}
::v-deep .el-step__icon.is-text {
  border-radius: 0;
  border: 0;

  font-size: 36px;

  color: #868484;
}

::v-deep .el-step__title.is-wait,
::v-deep .el-step__title.is-process {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  margin-top: 5px;
}
::v-deep .el-step__description.is-wait,
::v-deep .el-step__description.is-process {
  color: #868686;
  font-size: 14px;
  font-weight: 400;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  font-size: 14px;
  color: #ffffff;
  border-bottom: 2px solid #ebecec;
  padding: 0 60px;

  div {
    width: 50%;
  }

}
</style>
