qn-ai-pc/src/components/AppRoleDefault/index.vue

<!-- 子菜单容器组件 -->
<script setup lang="ts">
import { ref } from 'vue'
import type { AppGroup, RoleData } from './index.d'
import { getAppList, getRole } from '@/api/base/role'

const roleList = ref<RoleData[]>([])
const application = ref<AppGroup[]>([])
const typeIndex = ref(0)

// 角色
function getRoleData() {
  getRole(1).then((res) => {
    roleList.value = res
  })
}
// 应用
function getAppData() {
  getAppList().then((res) => {
    application.value = res
  })
}
getRoleData()
getAppData()

// 应用切换
function handleChange(index: number) {
  typeIndex.value = index
}
</script>

<template>
  <div class="app-role-default-box w-full h-full">
    <div class="applicationsbox">
      <div class="rolecounseling">
        <div class="title">
          角色咨询
        </div>
        <div class="role-box">
          <div
            v-for="(item, index) in roleList"
            :key="index"
            class="role-card"
          >
            <div class="top">
              <div class="avatar">
                <img :src="item.roleImg" class="roleImg" />
              </div>
              <div class="exchange">
                交流
              </div>
            </div>
            <div class="message">
              <div class="role">
                <div class="rolename">
                  {{ item.roleName }}
                </div>
                <div class="name">
                  {{ item.roleInfo }}
                </div>
              </div>
              <div class="explain">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="applicationbox">
        <div class="title">
          应用市场
        </div>
        <div class="type">
          <div>
            <div
              v-for="(item, index) in application"
              :key="index"
              :class="typeIndex === index ? 'typename change' : 'typename'"
              @click="handleChange(index)"
            >
              {{ item.groupName }}
            </div>
          </div>
          <div v-if="application.length > 0" class="list-box">
            <div
              v-for="(item, index) in application[typeIndex].roleInfoAppModelList"
              :key="index"
              class="applyList"
            >
              <div class="img">
                <img class="apple-img" :src="item.roleImg" />
                <div class="name">
                  {{ item.roleName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@include app('role-default-box') {
  .applicationsbox {
    width: 100%;
    .rolecounseling {
      width: 100%;
      max-height: 60vh;
      overflow: auto;
      .title {
        font-size: 16px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 600;
        color: #141515;
      }
      .role-box {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        column-gap: 2%;
        margin-top: 40px;

        .role-card {
          width: 23%;
          height: 100px;
          margin-bottom: 35px;
          background: linear-gradient(169deg, #edf3ff 0%, #f7f9ff 100%);
          box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
          border-radius: 10px;

          cursor: pointer;

          .top {
            display: flex;
            position: relative;
            .avatar {
              margin-top: -20px;
              padding-left: 25px;
              font-size: 0;
              .roleImg {
                width: 55px;
                height: 55px;
              }
            }
            .exchange {
              position: absolute;
              top: 5px;
              right: 0px;
              width: 4px;
              height: 30px;
              background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%);
              font-size: 0;
              border-radius: 100px 0px 0px 100px;
              transition: width 0.3s linear 0s;
            }
          }
          .message {
            width: 80%;
            margin: 10px auto 0;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .role {
              display: flex;
              align-items: center;
              .rolename {
                font-size: 15px;
                font-family:
                  PingFangSC,
                  PingFang SC;
                font-weight: 600;
                color: #253351;
              }
              .name {
                margin-left: 30px;
                font-size: 13px;
                font-family:
                  PingFangSC,
                  PingFang SC;
                font-weight: 400;
                color: #253351;
              }
            }
            .explain {
              font-size: 11px;
              font-family:
                PingFangSC,
                PingFang SC;
              font-weight: 400;
              color: #335d91;
              line-height: 25px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          &:hover .exchange {
            width: 50px;
            background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%);
            border-radius: 100px 0px 0px 100px;
            text-align: center;
            color: white;
            line-height: 30px;
            font-size: 14px;
            font-family:
              PingFangSC,
              PingFang SC;
            font-weight: 500;
          }
        }
      }
    }

    .applicationbox {
      width: 100%;
      padding: 20px 0px;
      max-height: 50vh;
      .title {
        font-size: 16px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 600;
        color: #141515;
      }
      .type {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        overflow: auto;
        .typename {
          cursor: pointer;
          border-radius: 16px;
          margin: 0 11px;
          padding: 4px 8px;
          font-size: 13px;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          display: inline-block;

          &.change {
            background: #236cff;
            color: #ffffff;
          }
        }

        .list-box {
          margin-top: 20px;
          display: flex;
          flex-wrap: wrap;

          .applyList {
            display: flex;
            flex-direction: column;
            padding: 10px 15px;
            .img {
              position: relative;
              overflow: hidden;
              cursor: pointer;
              .apple-img {
                width: 100px;
                height: 100px;
              }
              .name {
                width: 100%;
                position: absolute;
                bottom: 0px;
                left: 0;
                text-align: center;
                color: white;
                font-size: 11px;

                height: 25px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                line-height: 25px;
                background-color: rgba(0, 0, 0, 0.5);
              }
            }
          }
        }
      }
    }
  }
}
</style>