api2gpt-web/src/views/index.vue

<template>
  <div class="main">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>帐户管理</span>
        <router-link to="/money">
          <el-button type="primary">去充值</el-button>
        </router-link>
      </div>
    </template>
    <el-row :gutter="20" class="info">
      <el-col :span="8">帐户余额：￥<el-text class="mx-1">100</el-text></el-col>
      <el-col :span="8">本月消费：￥<el-text class="mx-1">100</el-text></el-col>
      <el-col :span="8">帐户等级：<el-tag class="ml-2" type="success">1</el-tag></el-col>
    </el-row>
  </el-card>
  <div class="main2">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>模型定价</span>
        </div>
      </template>
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column prop="name" label="模型"  />
        <el-table-column prop="price1" label="提问价格" width="180" />
        <el-table-column prop="price2" label="回答价格" width="180"/>
        <el-table-column prop="txt" label="备注" />
      </el-table>
    </el-card>
  </div>
  </div>
</template>

<script setup name="Index">
const tableData = [
  {
    name: 'gpt-3.5-turbo',
    price1: '￥0.028 /1k',
    price2: '￥0.028 /1k',
    txt: ''
  },
  {
    name: 'text-davinci-003',
    price1: '￥0.28 /1k',
    price2: '￥0.28 /1k',
    txt: ''
  },
  {
    name: 'text-embedding-ada-002',
    price1: '￥0.0056 /1k',
    price2: '￥0.0056 /1k',
    txt: ''
  }
]
</script>

<style scoped lang="scss">
.main {
  padding: 20px;
}
.main2 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.info {
    font-size: 15px;
    color: #606266;
 }
</style>