daikins/.svn/pristine/23/236fa4e7c76465a8a96e8b9aa20...

828 lines
27 KiB
Plaintext

<template>
<HomeHead class="top"></HomeHead>
<div class="flex w-full h-full">
<AppBlock class="w-full p30px text-#000">
<div class="font-600 flex items-center">
<!-- <img src="./images/logo.svg" class="h56px mr21px" /> -->
<div class="text-36px text-#000">差别化云空间</div>
</div>
<el-tabs type="card" v-model="activeName" class="menu_styl h50px mt30px text-20px" @tab-click="handleClick">
<el-tab-pane name="first" class="menu_styl">
<template #label>
<span class="custom-tabs-label">
<span class="text-20px my40px ">顶部列表</span>
</span>
</template>
<div class="p30px cont relative w100% h800px overflow-y-auto mb-80px">
<div v-for="item in dataC" class="my20px bg-#f5f5f5 rounded-15px items-center flex w-full min-h200px">
<img :src="item.url" class="max-w250px max-h350px min-w250px" />
<span class="ml40px text-20px min-w845px max-w845px">
<span>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题: {{ item.title }}</span><br><br><br>
<span>相关文件: <span v-if="item.fileList[0]">{{ item.fileList[0].name}}</span></span>
</span>
<div class="w200px ml30px">
<el-button size="small" type="primary" @click="handleEditC(item)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDeleteC(item)">删除</el-button>
</div>
</div>
<div class="my20px fixed bottom-25px left-20% z-2000 h50px w-full">
<el-button type="primary" @click="handleEditC(editC)" >新增列表内容</el-button>
<el-button type="primary" @click="getUser(1)" > 查看范围</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane name="niandu" class="menu_styl">
<template #label>
<span class="custom-tabs-label ">
<span class="text-20px ">大标题1</span>
</span>
</template>
<div class="p30px cont relative w100% h800px overflow-y-auto">
<div v-for="item in dataA" class="my20px bg-#f5f5f5 rounded-15px flex w-full ">
<div>
<img :src="item.url" class="max-w180px max-h350px min-w180px" />
</div>
<div class="min-w600px mt50px text-18px">
<span class="ml40px text-20px ">底部大标题: {{ item.titles }}</span>
<br><br> <br><br>
<span class="ml40px text-20px mt40px">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题: {{ item.title }}</span>
<br><br> <br><br>
<span class="ml40px text-20px mt40px">位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置: {{ item.indexId ==='1'?'左边内容':'右边内容' }}</span>
</div>
<div class="max-w100px min-w100px mt120px">
<span class=" text-18px ">文件列表:</span>
</div>
<div class="max-w250px min-w250px mt25px flex items-center">
<sapn v-if="item.fileList" v-for="i in item.fileList" ><span class="mt5px">{{i.name}}</span><br><br></sapn>
</div>
<div class="w160px ml30px mt120px">
<el-button size="small" type="primary" @click="handleEditA(item)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDeleteA(item)">删除</el-button>
</div>
</div>
<!-- <el-button type="primary" @click="handleEditA(editA)" class="my20px fixed bottom-30px left-20% z-2000">新增年度内容</el-button> -->
<div class="my20px fixed bottom-25px left-20% z-2000 h50px w-full">
<el-button type="primary" @click="handleEditA(editA)" >新增列表内容</el-button>
<el-button type="primary" @click="getUser(2)" @CloseThis="CloseThiss" > 查看范围</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane name="second" class="menu_styl">
<template #label>
<span class="custom-tabs-label ">
<span class="text-20px ">大标题2</span>
</span>
</template>
<div class="p30px cont relative w100% h800px overflow-y-auto">
<div v-for="item in dataB" class="my20px bg-#f5f5f5 rounded-15px flex w-full ">
<div>
<img :src="item.url" class="max-w180px max-h350px min-w180px" />
</div>
<div class="min-w600px mt50px">
<span class="ml40px text-20px ">底部大标题: {{ item.titles }}</span>
<br><br> <br><br>
<span class="ml40px text-20px mt40px">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题: {{ item.title }}</span>
<br><br> <br><br>
<span class="ml40px text-20px mt40px">位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置: {{ item.indexId ==='1'?'左边内容':'右边内容' }}</span>
</div>
<div class="max-w100px min-w100px mt120px">
<span class=" text-20px ">文件列表:</span>
</div>
<div class="max-w250px min-w250px mt20px flex items-center">
<sapn v-if="item.fileList" v-for="i in item.fileList" ><span class="mt5px">{{i.name}}</span><br><br></sapn>
</div>
<div class="w120px ml30px mt120px">
<el-button size="small" type="primary" @click="handleEditB(item)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDeleteB(item)">删除</el-button>
</div>
</div>
<div class="my20px fixed bottom-25px left-20% z-2000 h50px w-full">
<el-button type="primary" @click="handleEditB(editB)" >新增列表内容</el-button>
<el-button type="primary" @click="getUser(3)" > 查看范围</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane name="fourth" class="menu_styl">
<template #label>
<span class="custom-tabs-label">
<span class="text-20px">研究方向</span>
</span>
</template>
<div class="p30px cont relative w100% h800px overflow-y-auto">
<Modify></Modify>
<!-- <el-button type="primary" @click="handleEditC(editC)" class="my20px absolute bottom-0px left-0px">新增列表内容</el-button> -->
</div>
</el-tab-pane>
<el-tab-pane name="pro" class="menu_styl">
<template #label>
<span class="custom-tabs-label">
<span class="text-20px">PRO成员</span>
</span>
</template>
<ModifyPor/>
</el-tab-pane>
<el-tab-pane name="list" class="menu_styl">
<template #label>
<span class="custom-tabs-label">
<span class="text-20px">解决方案列表</span>
</span>
</template>
<ModifyList/>
</el-tab-pane>
</el-tabs>
</AppBlock>
</div>
<n-modal v-model:show="shomkC">
<div class="bg-#FFF p30px">
<el-form :model="editC" label-width="120px" :inline="true">
<el-form-item label="标题">
<el-input v-model="editC.title" />
</el-form-item>
<br>
<!-- <el-form-item label="所属类型">
<n-select class="min-w220px" size="large" v-if="options" v-model:value="editC.catId" :options="options" label-field="cateName" value-field="id" />
</el-form-item> -->
<br>
<el-form-item label="图片">
<el-upload v-model:file-list="editC.files" :headers="header" action="/test-api/common/upload"
list-type="picture-card" :on-success="handlePreview" :on-remove="handleRemove"
:before-upload="onUpload" :limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
<br>
<el-form-item label="文件" v-if="editC.fileList">
<el-upload v-model:file-list="editC.fileList" class="upload-demo" :headers="header"
action="/test-api/common/upload" :limit="1">
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
</el-form>
<hr class="mb15px border-#f1f1f1">
<el-form-item>
<el-button type="primary" @click="onSubmitC(editC)">确认</el-button>
</el-form-item>
</div>
</n-modal>
<n-modal v-model:show="shomkB">
<div class="bg-#FFF p30px">
<el-form :model="editC" label-width="120px" :inline="true">
<el-form-item label="名字">
<el-input v-model="fuckList.title" />
</el-form-item>
<br>
<el-form-item label="照片">
<el-upload v-model:file-list="fuckList.files" :headers="header" action="/test-api/common/upload"
list-type="picture-card" :on-success="handlePreviews" :on-remove="handleRemove" :on-error="handErro"
:on-exceed="handOnExceed" :limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<br>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
<br>
<el-form-item label="职位">
<el-input v-model="fuckList.time" />
</el-form-item>
<br>
<el-form-item label="研究方向">
<el-input v-model="fuckList.dowhat" />
</el-form-item>
<br>
<el-form-item label="文件">
<el-upload v-model:file-list="fuckList.fileList" class="upload-demo" :before-upload="beforeUpload"
:headers="header" action="/test-api/common/upload">
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
</el-form>
<hr class="mb15px border-#f1f1f1">
<el-form-item>
<el-button type="primary" @click="onSubmits(fuckList)">确认</el-button>
</el-form-item>
</div>
</n-modal>
<n-modal v-model:show="shomkA">
<div class="bg-#FFF p30px">
<el-form :model="editA" label-width="120px" :inline="true">
<el-form-item label="底部大标题">
<el-input v-model="editA.titles" />
</el-form-item>
<br />
<el-form-item label="标题">
<el-input v-model="editA.title" />
</el-form-item>
<br>
<!-- <el-form-item label="编辑模块">
<el-radio-group v-model="editA.indexId" class="ml-4">
<el-radio label="1" size="large">左侧内容</el-radio>
<el-radio label="2" size="large">解决方案创造</el-radio>
<el-radio label="2" size="large">右侧内容</el-radio>
</el-radio-group>
</el-form-item>
<br> -->
<el-form-item label="封面图">
<el-upload v-model:file-list="editA.files" :headers="header" action="/test-api/common/upload"
list-type="picture-card" :on-success="handlePreview1" :on-remove="handleRemove" :on-error="handErro"
:on-exceed="handOnExceed" :limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<br>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
<br>
<el-form-item label="文件">
<el-upload v-model:file-list="editA.fileList" class="upload-demo" :headers="header"
action="/test-api/common/upload" :on-change="handleChange">
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
</el-form>
<hr class="mb15px border-#f1f1f1">
<el-form-item class="">
<el-button type="primary" class="w88px justify-center" @click="onSubmitA(editA)">确认</el-button>
</el-form-item>
</div>
</n-modal>
<n-modal v-model:show="shomkD">
<div class="bg-#FFF p30px">
<el-form :model="editB" label-width="120px" :inline="true">
<el-form-item label="底部大标题标题">
<el-input v-model="editB.titles" />
</el-form-item>
<br />
<el-form-item label="标题">
<el-input v-model="editB.title" />
</el-form-item>
<br>
<el-form-item label="封面图">
<el-upload v-model:file-list="editB.files" :headers="header" action="/test-api/common/upload"
list-type="picture-card" :on-success="handlePreview2" :on-remove="handleRemove" :on-exceed="handOnExceed"
:limit="1">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<br>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
<br>
<el-form-item label="文件">
<el-upload v-model:file-list="editB.fileList" class="upload-demo" :headers="header"
action="/test-api/common/upload" :on-change="handleChange">
<el-button type="primary">选择文件</el-button>
</el-upload>
</el-form-item>
</el-form>
<hr class="mb15px border-#f1f1f1">
<el-form-item>
<el-button type="primary" @click="onSubmitB(editB)">确认</el-button>
</el-form-item>
</div>
</n-modal>
<n-modal v-model:show="showModal">
<UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss"/>
</n-modal>
</template>
<script setup lang="ts">
import AppBlock from '@/components/AppBlock.vue'
import { useMessage, NModal, NSelect, NSpace } from 'naive-ui'
import HomeHead from '@/views/home/components/HomeHead.vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
import { getLabActList, getLabCsrActList, addLab, getCateList } from '@/api/daikin/base'
import Modify from './modifys.vue'
import ModifyPor from './modify.vue'
import ModifyList from './component/modify.vue'
import UserList from '@/views/home/intelligence/process/UserPages.vue'
const ids = ref('')
const { push } = useRouter()
const store = useUserStore()
const message = useMessage()
const header = { 'token': store.user.token }
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const dataA = ref([])
const dataB = ref([])
const dataC = ref([])
const dataD = ref([])
const dataE = ref([])
const options = ref([])
const editC = ref()
const editD = ref()
const editA = ref()
const editB = ref()
const shomkA = ref(false)
const shomkB = ref(false)
const shomkC = ref(false)
const shomkD = ref(false)
const handleClick = (tab: TabsPaneContext, event: Event) => {
// console.log(tab, event)
}
const activeName = ref('first')
/**"memberContentIsSelect": 1, //成员是否有权限 1是 2否
* "bannerContentIsSelect": 2, //banner是否有权限 1是 2否
* "leftContentIsSelect": 1, //左大是否有权限 1是 2否
* "rightContentIsSelect": 1, //右大是否有权限 1是 2否
* "actTopIsSelect": 2, //基础研究方向 第一条分类 是否有权限 1是 2否
"actMidIsSelect": 2, //基础研究方向 第二条分类 是否有权限 1是 2否
"actDownIsSelect": 2 //基础研究方向 第三条分类 是否有权限 1是 2否
*/
const memberUserLists =ref()
const leftUserLists =ref()
const rightUserLists =ref()
const bannerUserLists =ref()
const bannerContentUserLists = ref()
const leftContentUserLists = ref()
const rightContentUserLists = ref()
onMounted(async () => {
getData();
})
async function getData() {
// const { data: datas } = await getLabCsrActList()
const { data } = await getLabActList()
const {id,memberContent,bannerContent,leftContent,rightContent,leftUserList,rightUserList,memberUserList,bannerUserList,bannerContentUserList,leftContentUserList,rightContentUserList} = data
// const { data: dataBot } = await getCateList({ indexId: 1 })
memberUserLists.value = memberUserList
leftUserLists.value = leftUserList
rightUserLists.value = rightUserList
bannerUserLists.value = bannerUserList
bannerContentUserLists.value = bannerContentUserList
leftContentUserLists.value = leftContentUserList
rightContentUserLists.value = rightContentUserList
// options.value = dataBot
ids.value = id
// console.log(dataBot,options.value)
if (leftContent && leftContent.length > 0) {
dataA.value = leftContent.map((obj: any, indx: number) => ({
...obj,
id: indx + 1
}))
}
// dataB.value = B
if (rightContent && rightContent.length > 0) {
dataB.value = rightContent.map((obj: any, indx: number) => ({
...obj,
id: indx + 1
}))
}
// dataC.value = bannerContent
// dataD.value = D
if (bannerContent && bannerContent.length > 0) {
dataC.value = bannerContent.map((obj: any, indx: number) => ({
...obj,
id: indx + 1
}))
}
if (memberContent) {
dataD.value = memberContent
}
userList.value =data.userIdList
// console.log( fuckList.value)
}
async function modify(objA: any,objB: any,objC: any,objD: any,objE: any,objF: any,objG: any,objH: any) {
const leftContent = unref(objA)
const rightContent = unref(objB)
const bannerContent = unref(objC)
const memberContent = unref(objD)
const bannerUserList =unref(objE)
const leftUserList =unref(objF)
const rightUserList =unref(objG)
const memberUserList =unref(objH)
const id = ids.value
// if(!userList.value){
// message.info("请选择通知范围")
// return
// }
const userIdList = userList.value
console.log(bannerContent)
const { code, msg } = await addLab({ id,bannerUserList,leftUserList,rightUserList,memberUserList, memberContent,bannerContent,rightContent,leftContent })
if (code === 200) { message.success("修改成功") }
else message.warning(msg)
// window.location.reload();
getData();
}
// async function onSubmitD(row: { id: number; url: any; title: string; time: string; files: never[]; fileList: never[] }) {
// console.log(swiperList.value, row.id)
// swiperList.value.map(obj => {
// obj.id === row.id ? { ...obj, ...row } : obj
// // console.log(i.id)
// })
// const existingIds = swiperList.value.map(obj => obj.id);
// if (!existingIds.includes(row.id)) {
// if (row.id === '') {
// row.id = Math.floor(Math.random() * 100)
// }
// if (!row.catId) {
// message.error("所属类型必选!")
// return
// }
// swiperList.value.push(row);
// }
// shomkB.value = false
// console.log(swiperList.value)
// }
async function onSubmitA(row: { id: string | number; indexId: any }) {
dataA.value.map(obj=>{
obj.id === row.id ? { ...obj, ...row } : obj
// console.log(i.id)
})
const existingIds = dataA.value.map(obj => obj.id);
if (!existingIds.includes(row.id)) {
if(row.id===''){
row.id = Math.floor(Math.random() * 100)
}
if(!row.indexId){
message.error("所属类型必选!")
return
}
dataA.value.push(row);
}
shomkA.value = false
modify(dataA.value,dataB.value,dataC.value,dataD.value,bannerUserLists.value,leftUserLists.value,rightUserLists.value,memberUserLists.value)
}
async function onSubmitB(row: { id: number; url: any; title: string; time: string; files: never[]; fileList: never[] }) {
// console.log(dataB.value, row.id)
dataB.value.map(obj => {
obj.id === row.id ? { ...obj, ...row } : obj
// console.log(i.id)
})
const existingIds = dataB.value.map(obj => obj.id);
if (!existingIds.includes(row.id)) {
if (row.id === '') {
row.id = Math.floor(Math.random() * 100)
}
dataB.value.push(row);
}
shomkD.value = false
modify(dataA.value,dataB.value,dataC.value,dataD.value,bannerUserLists.value,leftUserLists.value,rightUserLists.value,memberUserLists.value)
}
async function onSubmitC(row: any) {
// console.log(row)
dataC.value.map(obj=>{
obj.id === row.id ? { ...obj, ...row } : obj
// console.log(i.id)
})
const existingIds = dataC.value.map(obj => obj.id);
if (!existingIds.includes(row.id)) {
if(row.id===''){
row.id = Math.floor(Math.random() * 100)
}
// if(!row.catId){
// message.error("所属类型必选!")
// return
// }
dataC.value.push(row);
}
shomkC.value = false
modify(dataA.value,dataB.value,dataC.value,dataD.value,bannerUserLists.value,leftUserLists.value,rightUserLists.value,memberUserLists.value)
// console.log(dataC.value)
}
const handleEditC = (row: any) => {
// console.log(row)
if (row && row.url) {
// console.log(row.files.length)
if (row.files.length <= 0) {
row.files.push({ url: row.url });
}
else {
row.files.map(i => {
i.url = i.response.url
})
}
}
else {
editC.value = {
id: '',
url: '',
title: '',
time: '',
createTime:date,
files: [],
fileList: [],
}
}
shomkC.value = true
if (!row) return
editC.value = row
console.log(editC.value)
}
const date = new Date()
const handleEditA = (row: any) => {
// console.log(row)
if (row && row.url) {
// console.log(row.files.length)
if (row.files.length <= 0) {
row.files.push({ url: row.url });
}
else {
row.files.map(i => {
i.url = i.response.url
})
}
}
else {
editA.value = {
id: '',
url: '',
title: '',
titles: '',
indexId:'1',
files: [],
fileList: []
}
}
shomkA.value = true
if (!row) return
editA.value = row
// console.log(editA.value)
}
const handleEditB = (row: any) => {
// console.log(row)
if (row && row.url) {
// console.log(row.files.length)
if (row.files.length <= 0) {
row.files.push({ url: row.url });
}
else {
row.files.map(i => {
i.url = i.response.url
})
}
}
else {
editB.value = {
id: '',
url: '',
titles: '',
title: '',
time: '',
files: [],
fileList: [],
show: false,
}
}
shomkD.value = true
if (!row) return
editB.value = row
// console.log(editB.value)
}
const handleDeleteA = (row: any) => {
// console.log(dataA.value, row)
dataA.value = dataA.value.filter(item => item.id !== row.id);
modify(dataA.value,dataB.value,dataC.value,dataD.value,bannerUserLists.value,leftUserLists.value,rightUserLists.value,memberUserLists.value)
}
const handleDeleteB = (row: any) => {
// console.log(dataB.value, row)
dataB.value = dataB.value.filter(item => item.id !== row.id);
}
const handleDeleteC = (row: any) => {
dataC.value = dataC.value.filter(item => item.id !== row.id);
modify(dataA.value,dataB.value,dataC.value,dataD.value,bannerUserLists.value,leftUserLists.value,rightUserLists.value,memberUserLists.value)
}
const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
// console.log(uploadFile, uploadFiles)
}
const handOnExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
message.warning("最多只能上传一张图片!")
}
const handlePreview: UploadProps['onSuccess'] = (uploadFile: any) => {
// console.log(uploadFile.url)
if(uploadFile.code ===200){
editC.value.url = uploadFile.url
}
else{
message.warning(uploadFile.msg)
return
}
}
const handlePreview1: UploadProps['onSuccess'] = (uploadFile: any) => {
// console.log("++++++++++++++++++++++++++++")
// console.log(uploadFile,editA.value)
if(uploadFile.code ===200){
editA.value.url = uploadFile.url
}
else{
message.warning(uploadFile.msg)
return
}
}
const handlePreview2: UploadProps['onSuccess'] = (uploadFile: any) => {
// console.log("++++++++++++++++++++++++++++")
if(uploadFile.code ===200){
editB.value.url = uploadFile.url
}
else{
message.warning(uploadFile.msg)
return
}
}
const beforeUpload=(file: { type: string })=> {
// Validate the file type before uploading
const isPDF = file.type === 'application/pdf';
if (!isPDF) {
message.error('仅支持PDF文件上传');
}
return isPDF;
}
const onUpload: UploadProps['onUpload'] = (uploadFile: any) => {
// console.log("++++++++++++++++++++++++++++")
// message.warning(uploadFile)
// dataB.value.url = uploadFile.url
}
const userList = ref()
const showModal = ref(false)
const flg = ref()
const setUserList =ref()
const getUser=(id: any)=>{
showModal.value = !showModal.value
flg.value = id
if(id===1){
setUserList.value = bannerContentUserLists.value
}
else if(id===2){
setUserList.value = leftContentUserLists.value
}
else if(id===3){
setUserList.value = rightContentUserLists.value
}
}
// 获取子组件传过来的值
const handleChild = (data: any) => {
const { showModal: show, multipleSelection } = data
showModal.value = unref(show)
// userList.value = multipleSelection
let userIdList: any[] =[]
multipleSelection.value.forEach((i: { userId: any })=>{
// console.log(dataList.value)
userIdList.push(i.userId)
})
if(flg.value===1){
bannerUserLists.value= userIdList
}
else if(flg.value===2){
leftUserLists.value = userIdList
}
else if(flg.value===3){
rightUserLists.value = userIdList
}
modify(dataA.value,dataB.value,dataC.value,dataD.value,bannerUserLists.value,leftUserLists.value,rightUserLists.value,memberUserLists.value)
}
const CloseThiss = (data: boolean)=>{
showModal.value = data
}
</script>
<style lang="less">
.el-form-item__content{
justify-content: center;
}
::-webkit-scrollbar{
width: 1px;
}
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.cont {
img {
background-color: antiquewhite;
}
}
.custom-tabs-label {
padding: 30px;
}
.top {
position: absolute;
right: 30px;
top: -92px;
}
</style>