ali_ai_learn_web/src/pages/PersonalCenter.vue

<template>
  <div class="personal">
    <Breadcrumb />
    <div class="personal-head">
      <el-avatar :size="100"
        :src="appStore?.userInfo?.userAvatar ? appStore.userInfo.userAvatar : appStore.avatarDefault" />
      <div class="personal-head-box">
        <div class="personal-head-top">
          <div class="personal-head-left">

            <div class="personal-user-info">
              <div class="personal-username">
                <div class="">{{ appStore?.userInfo?.nickName }}</div>
                <template v-if="['0', '1', '2'].includes(appStore?.userInfo?.memberType)"></template>
                <img :src="`/src/assets/imgs/my/vip${appStore?.userInfo?.memberType}@2x.png`" alt="">
                <!-- memberType  会员类型memberType 会员类型分为企业会员（2）和个人会员（1）、免费会员（0） -->
              </div>
              <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：{{
                appStore?.userInfo?.userPhone
              }}
              </div>
              <div class="" v-if="['1', '2'].includes(appStore?.userInfo?.memberType)">{{
                $t('personalCenter.vipEndTime')
              }}: {{
                  appStore?.userInfo?.memberExpire }}</div>
              <div class="mt4" v-if="appStore?.userInfo?.skillTags">
                <el-button v-for="(item, index) in appStore.userInfo.skillTags.split(',')" type="primary" plain>{{ item
                }}</el-button>
              </div>

            </div>

          </div>
          <div class="personal-head-right">
            <div @click="dialogVisible = true" class="personal-head-right-li">
              <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
              <div class="">{{ $t('personalCenter.editProfile') }}</div>
            </div>
            <div @click="router.push({ path: '/member' })" class="personal-head-right-li">
              <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
              <div class="">{{ $t('personalCenter.openMembership') }}</div>
            </div>
            <div @click="signIn" class="personal-head-right-li gradient">
              <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
              <div class="">{{ $t('personalCenter.checkIn') }}</div>
            </div>
          </div>
        </div>
        <div class="personal-head-bot">
          <div class="personal-user-list">
            <div class="personal-user-li">
              <span>{{ appStore?.userInfo?.pointsBalance || 0 }}</span>
              <span>{{ $t('common.mibi') }}</span>
            </div>
            <div class="personal-user-line"></div>
            <div class="personal-user-li">
              <span>{{ appStore?.userInfo?.baoMiBalance || 0 }}</span>
              <span>{{ $t('common.baomibi') }}</span>
            </div>
            <div class="btn">
              <el-button type="primary" @click="router.push({
                path: `/order-confirm`,
              })">{{ $t('route.recharge') }}</el-button>
            </div>


            <!-- <div class="personal-user-line"></div> -->

          </div>
          <div class="personal-user-list">
            <div class="personal-user-li">
              <span>{{ collectCount }}</span>
              <span>{{ $t('common.collect') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="personal-main">
      <div class="personal-left">
        <div class="personal-left-list">
          <template v-for="(item, index) in navList" :key="index">
            <div v-if="item.show" @click="toPath(item, index)" :class="{ active: index == navIndex }"
              class="personal-left-li">
              <img v-if="index == navIndex" :src="item.iconActive" alt="">
              <img v-else :src="item.icon" alt="">
              <div class="">{{ $t(item.name) }}</div>
            </div>
          </template>

        </div>
      </div>
      <div class="personal-right">
        <div class="personal-right-main">
          <router-view />
        </div>

      </div>
    </div>

    <!-- 工单 -->

    <div class="workOrder-dot" @click="show = true">
      <img src="/src/assets/imgs/my/icon9a@2x.png" alt="">
      <div class="">{{ $t('personalCenter.gongdan') }}</div>
    </div>

    <el-dialog v-model="show" :title="`${$t('personalCenter.gongdan')}`" width="784">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${$t(tab.label)}`" :name="tab.name">
          <template v-if="activeName == 0">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
              <el-form-item :label="`${$t('personalCenter.gongdanleixing')}`" prop="issueCategory">
                <el-select v-model="ruleForm.issueCategory" :placeholder="`${$t('common.qingxuanze')}`"
                  style="width: 100%">
                  <el-option v-for="item in workTypeList" :key="item.value" :label="`${$t(item.label)}`"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item :label="`${$t('personalCenter.gongdanbiaoti')}`" prop="issueTitle">
                <el-input v-model="ruleForm.issueTitle" :placeholder="`${$t('common.placeholderInput')}`" />
              </el-form-item>
              <el-form-item :label="`${$t('personalCenter.gongdanneirong')}`" prop="issueContent">
                <el-input v-model="ruleForm.issueContent" :placeholder="`${$t('common.placeholderInput')}`" :rows="2"
                  type="textarea" />
              </el-form-item>
            </el-form>
          </template>
          <template v-else>
            <el-collapse v-model="workName" accordion>
              <el-collapse-item :title="item.issueTitle || `${index + 1}、${item.question}`" :name="item.id"
                v-for="(item, index) in workList" :key="index">
                <template #title >
                  <div class="work-head">
                    <img v-if="activeName == 2" src="/src/assets/imgs/my/Q@2x.png" alt="">
                    <div class="">{{ `${ activeName == 2 ? (index + 1) + '、' : '' }` }}{{ item.issueTitle || item.question }}</div>
                  </div>
                </template>
                <div class="work-content">
                  <img v-if="activeName == 2" src="/src/assets/imgs/my/A@2x.png" alt="">
                  <div class="">{{ item.issueContent || item.answer }}</div>
                </div>
              </el-collapse-item>
            </el-collapse>
            <template v-if="workList && workList.length">
              <Pagination :total="workForm.total" :page-size="workForm.pageSize" :current-page="workForm.pageNum"
                @page-change="handlePageChange" />
            </template>
            <el-empty v-else :description="$t('common.empty')" />
          </template>

        </el-tab-pane>
      </el-tabs>
      <template #footer v-if="activeName == 0">
        <div class="dialog-footer flex-center">
          <el-button @click="resetForm">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click="submitForm(ruleFormRef)">{{ $t('common.confirm')
            }}</el-button>
        </div>
      </template>
    </el-dialog>



    <el-dialog v-model="dialogVisible" title="编辑资料" width="784">
      <el-form :model="userInfo" label-width="auto" label-position="top">

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="上传头像">
              <!-- 图片类型 -->
              <FileUploader ref="fileUploader" accept="image/*" :multiple="false" :limit="1" :auto-upload="true"
                list-type="picture-card" :data="{ directory: 'workflow' }" buttonText="" v-model="coverImage" tip="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="昵称">
              <el-input v-model="userInfo.nickName" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录手机号">
              <el-input :disabled="userInfo.userPhone ? true : false" v-model="userInfo.userPhone"
                :placeholder="$t('common.placeholderInput')" class="inputStyle" :input-style="{
                  backgroundColor: 'transparent',
                }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="登录邮箱">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" />
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="验证码" prop="verifyCode">
              <el-input v-model="userInfo.verifyCode" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button type="primary" :disabled="smsCountdown > 0" @click="sendSmsCode" style="width:140px"
                    :class="{ 'countdown-btn': smsCountdown > 0 }" size="small">
                    {{ smsCountdown > 0 ? `${smsCountdown}s` : $t('login.sendCaptcha') }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="n8n账号">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button :icon="Refresh" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="n8n初始密码">
              <el-input v-model="userInfo.userPhone" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="Coze账号">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button :icon="Refresh" />
                </template>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="Coze初始密码">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="Dify账号">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button :icon="Refresh" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Dify初始密码">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">

          <el-col :span="12">
            <el-form-item label="FastGpt账号">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }">
                <template #append>
                  <el-button :icon="Refresh" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="FastGpt初始密码">
              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
                :input-style="{
                  backgroundColor: 'transparent',
                }" readonly type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="技能标签">
              <div class="flex tags flex_1">
                <el-tag v-for="tag in dynamicTags" :key="tag" closable @close="handleClose(tag)">
                  {{ tag }}
                </el-tag>
                <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                  @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" maxlength="5">
                  <template #append>
                    <el-button :icon="Plus" />
                  </template></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">
                  + {{ $t('common.addTags') }}
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click="handleConfirm">
            {{ $t('common.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script setup lang="ts">

import { Plus, Refresh } from '@element-plus/icons-vue'

import { useAppStore } from '@/pinia/appStore'

import { ref, onMounted, computed, nextTick } from 'vue';


import type { InputInstance } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'

import { getUserInfo, updateUserInfo } from '@/api/auth.js'

import { checkIn, queryCollectCount, issue, issueList, faqList, getfaq } from '@/api/my.js'

import DGTMessage from '@/utils/message'

import { useI18n } from 'vue-i18n'

import FileUploader from '@/components/FileUploader.vue'

import Pagination from '@/components/Pagination.vue'


import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  issueCategory: string
  issueTitle: string
  issueContent: string
}

const ruleFormRef = ref(null);

const { t } = useI18n()

const appStore = useAppStore();

const route = useRoute()

const router = useRouter()

const navList = ref([
  {
    name: 'personalCenter.myWallet',
    path: '/personal-center/wallet',
    icon: '/src/assets/imgs/my/icon1@2x.png',
    iconActive: '/src/assets/imgs/my/icon1a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.membershipInfo',
    path: '/personal-center/member-details',
    icon: '/src/assets/imgs/my/icon2@2x.png',
    iconActive: '/src/assets/imgs/my/icon2a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.myCollection',
    path: '/personal-center/collection',
    icon: '/src/assets/imgs/my/icon3@2x.png',
    iconActive: '/src/assets/imgs/my/icon3a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.myDemand',
    path: '/personal-center/demand',
    icon: '/src/assets/imgs/my/icon4@2x.png',
    iconActive: '/src/assets/imgs/my/icon4a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.myOrders',
    path: '/personal-center/orders',
    icon: '/src/assets/imgs/my/icon5@2x.png',
    iconActive: '/src/assets/imgs/my/icon5a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.myInvoice',
    path: '/personal-center/invoice',
    icon: '/src/assets/imgs/my/icon6@2x.png',
    iconActive: '/src/assets/imgs/my/icon6a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.myWorkflow',
    path: '/personal-center/workflow',
    icon: '/src/assets/imgs/my/icon7@2x.png',
    iconActive: '/src/assets/imgs/my/icon7a@2x.png',
    show: true
  },
  {
    name: 'personalCenter.businessManagement',
    path: '/personal-center/business-management',
    icon: '/src/assets/imgs/my/icon8@2x.png',
    iconActive: '/src/assets/imgs/my/icon8a@2x.png',
    show: false
  },
  // {
  //   name: 'personalCenter.serviceManagement',
  //   path: '/personal-center/business-management',
  //   icon: '/src/assets/imgs/my/icon9@2x.png',
  //   iconActive: '/src/assets/imgs/my/icon9a@2x.png'
  // }
])

const dialogVisible = ref(false)

const show = ref(false)

const tabs = ref([
  { label: 'personalCenter.tijiaogongdan', name: 0 },
  { label: 'personalCenter.lishigongdan', name: 1 },
  { label: 'personalCenter.changjianwenti', name: 2 }
])

const workList = ref([])

const workForm = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const activeName = ref(0)

const workName = ref(null)

const workTypeList = ref([
  {
    value: 'account',
    label: 'personalCenter.zhanghaowenti'
  },
  {
    value: 'payment',
    label: 'personalCenter.zhifuwenti'
  },
  {
    value: 'course',
    label: 'personalCenter.kechengwenti'
  },
  {
    value: 'workflow',
    label: 'personalCenter.gongzuoliuwenti'
  },
  {
    value: 'other',
    label: 'personalCenter.qitawenti'
  }
])

const ruleForm = ref<RuleForm>({
  issueCategory: '',
  issueTitle: '',
  issueContent: ''
})

const rules = ref<FormRules<RuleForm>>({
  issueCategory: [
    {
      required: true,
      message: '请选择工单类型',
      trigger: 'change',
    },
  ],
  issueTitle: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],
  issueContent: [
    { required: true, message: '请输入内容', trigger: 'blur' },
  ]
})

const navIndex = computed(() => {
  switch (route.name) {
    case 'Wallet':
      return 0
      break;
    case 'MemberDetails':
      return 1
      break;
    case 'Wallet':
      return 0
      break;
    case 'Collection':
      return 2
      break;
    case 'Demand':
      return 3
      break;
    case 'Orders':
      return 4
      break;
    case 'Invoice':
      return 5
      break;
    case 'Workflow':
      return 6
      break;
    case 'BusinessManagement':
      return 7
      break;
    default:
      break;
  }
  return null;
})

const userInfo = ref({})//用户信息

const coverImage = ref([]);

// 验证码倒计时
const smsCountdown = ref(0)
const passwordresetCountdown = ref(0)
const emailCountdown = ref(0)

// 发送短信验证码
const sendSmsCode = async () => {
  if (!smsForm.account) {
    ElMessage.warning('请先输入手机号或邮箱')
    return
  }

  // 验证手机号格式
  if (!PHONE_REGEX.test(smsForm.account) && !EMAIL_REGEX.test(smsForm.account)) {
    ElMessage.warning('请输入正确的手机号或邮箱')
    return
  }

  let res = null;
  if (PHONE_REGEX.test(smsForm.account)) {
    res = await getSmsCode({
      phone: smsForm.account
    })
  } else if (EMAIL_REGEX.test(smsForm.account)) {
    res = await getEmailCode({
      email: smsForm.account
    })
  }

  if (res.code !== 200) {
    return
  }

  // 模拟发送验证码
  ElMessage.success('验证码发送成功')

  // 开始倒计时
  smsCountdown.value = 60
  const timer = setInterval(() => {
    smsCountdown.value--
    if (smsCountdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}


const handlePageChange = (page) => {
  workForm.value.pageNum = page;
  getList()
}

const handleClick = async (tab) => {
  activeName.value = tab.props.name
  workForm.value.pageNum = 1;
  getList()
}

const getList = async () => {
  if (activeName.value == 0) return;
  let api = activeName.value == 1 ? issueList(workForm.value) : faqList(workForm.value);
  let res = await api;
  workList.value = res.rows;
  workForm.value.total = res.total;
}


const resetForm = () => {
  show.value = false;
  for (const key in ruleForm.value) {
    ruleForm.value[key] = ''
  }
}

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl[0].validate(async (valid, fields) => {
    if (valid) {
      let res = await issue(ruleForm.value);
      if (res.code === 200) {
        resetForm();
        DGTMessage.success(`${t('common.submitSuccess')}`)
      }
    }
  })
}

// 更新用户信息
const handleConfirm = async () => {
  let res = await updateUserInfo({
    nickName: userInfo.value.nickName,
    userAvatar: coverImage.value.map(item => item.url).join(';'),
    skillTags: dynamicTags.value.join(','),
    userPhone: userInfo.value.userPhone,
  })
  if (res.code === 200) {
    appStore.USERINFO();
    DGTMessage.success(`${t('common.modify')}${t('common.success')}`)
    dialogVisible.value = false;
  }
}

const toPath = (item: any, index: number) => {
  if (item.path) {
    router.push(item.path);
  }
};
// 签到
const signIn = async () => {
  let res = await checkIn({ actionType: 1 });
  if (res.code === 200) {
    appStore.USERINFO();
    DGTMessage.success(`${t('personalCenter.checkIn')}${t('common.success')}`)
  }
}
// 获取用户信息
const getInfo = async () => {
  let res = await getUserInfo();
  if (res?.user?.userAvatar) {
    coverImage.value = [{ url: res.user.userAvatar }]
  }
  if (res?.user?.skillTags) {
    dynamicTags.value = res.user.skillTags.split(',')
  }
  userInfo.value = res.user;
  navList.value.forEach(item => {
    if (item.name === 'personalCenter.businessManagement' && res.user.isCompanyAuth == 1) {
      item.show = true;
    }
  })
  // isCompanyAuth
}

const collectCount = ref(0)

const inputValue = ref('')

const dynamicTags = ref([])

const inputVisible = ref(false)

const InputRef = ref<InputInstance>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const getCount = async () => {
  let res = await queryCollectCount();
  collectCount.value = res?.data?.collectCount;
}

onMounted(() => {
  getInfo()
  getCount()
})
</script>
<style lang="scss" scoped>
div {
  -webkit-user-select: none;
  /* Safari, Chrome */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* 标准语法 */
}

.personal-head {
  border-radius: 16px;
  padding: 24px 16px;
  background: #FFFFFF;
  display: flex;

  .personal-head-box {
    flex: 1;
    margin-left: 16px;
  }

  .personal-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .personal-head-bot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .personal-user-list {
      display: flex;

      align-items: center;

      .btn {
        margin-left: 16px;
      }

      .personal-user-li {
        span {
          color: #333333;
          font-size: 14px;

          &:first-child {
            font-size: 28px;
            font-weight: bold;
            margin-right: 10px;
          }
        }
      }

      .personal-user-line {
        margin: 0 16px;
        height: 20px;
        width: 2px;
        background: #EBEEF5;
      }
    }
  }

  .personal-head-left {
    display: flex;

    .personal-user-info {


      .personal-username {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        color: #333333;

        img {
          width: 68px;
          height: 21px;
          margin-left: 8px;
        }
      }


    }
  }

  .personal-head-right {
    display: flex;
    align-items: center;

    .personal-head-right-li {
      display: flex;
      padding: 9px 16px;
      align-items: center;
      margin-left: 8px;
      // height: 32px;
      background: #EAF0FF;
      border-radius: 4px;
      cursor: pointer;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        background: linear-gradient(270deg, #0055FE 0%, #C832FA 100%);

        div {
          color: #FFFFFF;
        }
      }

      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }

      div {
        color: #2D71FF;
        font-size: 14px;
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

.personal-main {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;

  .personal-left {
    width: 300px;

    .personal-left-list {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 8px;

      .personal-left-li {
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
        border-radius: 8px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }

        &:hover {
          background: #F5F7FF;
        }
      }

      .active {
        position: relative;
        background: #EAF0FF;

        &::after {
          top: 50%;
          transform: translateY(-50%);
          content: '';
          position: absolute;
          right: 8px;
          width: 4px;
          height: 24px;
          background: #2D71FF;
          border-radius: 2px;
        }

        div {
          color: #2D71FF;
        }
      }
    }
  }

  .personal-right {
    flex: 1;

    margin-left: 16px;

    .personal-right-main {
      padding: 0 16px;
      border-radius: 16px;
      background: #FFFFFF;
    }
  }
}

.tags {
  flex-wrap: wrap;
  gap: 16px;
}

.inputStyle {
  width: 368px;
  height: 36px;
  background: #F5F7FA;
  border-radius: 4px;
  border: 1px solid #F2F6FC;

  :deep(.el-input__wrapper) {
    background-color: transparent;
  }
}

.workOrder-dot {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  right: 80px;
  bottom: 70px;
  width: 84px;
  height: 84px;
  position: fixed;
  color: #2D71FF;
  font-size: 14px;
  background: #FFFFFF;
  box-shadow: 2px 2px 10px 0px rgba(45, 113, 255, 0.15);
  border-radius: 50px;

  img {
    width: 24px;
    height: 24px;
  }
}
.work-head {
  display: flex;
  color: #333333;
  font-size: 18px;
  font-weight: bold;
  align-items: center;
  img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}
.work-content {
  padding: 16px;
  background: #F5F7FA;
  border-radius: 16px;
  color: #333333;
  line-height: 24px;
  font-size: 16px;
  display: flex;
  img {
    width: 24px;
    height: 24px;
    margin-right: 16px;
  }
}

:deep(.el-collapse-item__header) {
  padding: 0 8px;
  background-color: transparent;
}

:deep(.el-collapse-item__content) {
  padding: 0 16px 16px;
}
</style>