pbl_admin_table/src/components/topPage.vue

<template>
    <div class="topPageCon">
        <div class="top" v-if="(fromL.admin.banner && fromL.admin.banner.length == 0) || !fromL.admin.banner">
            <div class="topBlock">
                <div class="topTit" style="display: flex;">
                    <div>欢迎使用</div>
                    <div style="color: #0354D7;margin: 0 15px;"><span v-if="roleUser.orgName">{{roleUser.orgName}}—</span>{{ roleUser.schoolName }}</div>
                    <div>AI平台！</div>
                </div>
                <div class="topDetail">
                     {{ fromL.basics.brief }}
                </div>
            </div>
            <img style="width: 96px;height: 96px;" src="../assets/img/root.png" alt="">
        </div>

        <div style="width: 100%;height: 100%;object-fit: cover;border-radius: 10px;height: 300px;margin-bottom: 14px;" 
        v-if="fromL.admin.banner && fromL.admin.banner.length == 1"
        >
            <img style="width: 100%;height: 100%;object-fit: cover;border-radius: 10px;" 
            :src="fromL.admin.banner[0].src" alt="" @click="gotoBanner(fromL.admin.banner[0].url)">
        </div>

        <div class="CarO" v-if="fromL.admin.banner && fromL.admin.banner.length > 1">
            <el-carousel style="width: 100%;" indicator-position="outside">
                <el-carousel-item v-for="(i,index) in fromL.admin.banner" :key="index">
                    <img style="width: 100%;height: 100%;object-fit: cover;border-radius: 10px;" 
                     @click="gotoBanner(i.url)"
                    :src="i.src" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 平台应用  -->



        <!-- 荔园 -->
         
        <div v-if="roleUser.organizeid == '6a695e62-1b6e-11f0-a66a-005056924926'" class="TabListAdmin">
            <div
                @mouseenter="setHovered(index, true)"
                @mouseleave="setHovered(index, false)"
                class="TabListAll2"
                @click="openApp2(item)" 
                v-for="(item,index) in liyuanTab" 
                :key="index+'1p'">
                    <img style="position: absolute;top: -40%;left: 50%;transform: translate(-50%,0);" :src="item.icon" alt="">
                <span class="tabTit">{{ item.name }}</span>
            </div>
        </div>
        <!-- 非荔园  -->
        <div v-else  class="TabList" >
            <div
                @mouseenter="setHovered(index, true)"
                @mouseleave="setHovered(index, false)"
                class="TabListAll"
                @click="openApp(item)" 
                v-for="(item,index) in tabList" 
                :key="index+'1p'">
                <div class="TabListCon">
                    <div v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
                        
                        <img class="imgApp"
                         :src="tabList[index].hovered ? p.hoverIcon ? p.hoverIcon : p.platformIcon : p.platformIcon" alt="">
                        <div class="TabListName">
                            {{ p.name }}
                        </div>
                    </div>
                    <div class="TabListBri">
                        <el-tooltip class="item" effect="light" :content="item.description" placement="bottom">
                            <span>
                                {{ item.description }}
                            </span>
                        </el-tooltip>
                    </div>
                </div>
                    
            </div>
        </div>

        <!-- 常见应用  -->
        <div class="footCon">
            <div class="footConLeft">
                <img v-if="fromL.basics.cocoFlow" :src="fromL.basics.cocoFlow" alt="">

                <div v-else style="min-width: 150px;display: flex;flex-direction: column;justify-content: flex-end;">
                    <img class="CutImg" src="../assets/img/dong.png" alt="">
                    <div class="CocoTit">
                        COCO FLOW
                    </div>
                </div>
                
            </div>

            <div style="display: flex;gap: 16px;flex: 1;">
                <div class="footList">
                    <div class="footListCon" v-for="(item,index) in admincocoFlow" @click="openNewWindow(item)" :key="index+'2p'">
                        <div class="footListConimg">
                            <img v-if="fromL.admin.cocoFlow.length == 0" 
                            class="footListConimgPic"
                            :src="appImgList[index]" alt="">

                            <img v-else-if="fromL.admin.cocoFlow[index].setIcon" 
                            class="footListConimgPic"
                            :src="fromL.admin.cocoFlow[index].setIcon" alt="">

                            <img
                            style="margin-bottom: 12px;height: 40px;width: 40px;object-fit: contain;"  
                            v-else :src="JSON.parse(item.json).icon" alt="">
                        </div>
                           
                            
                        <div class="TabListName">
                            <el-tooltip class="item" effect="light" :content="item.name" placement="bottom">
                                <span>
                                    {{ item.name }}
                                </span>
                            </el-tooltip>
                        </div>
                        <div class="TabListBri">
                            <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
                                <span>
                                    {{ item.detail }}
                                </span>
                            </el-tooltip>
                        </div>
                        <!-- <div class="cha" @click.stop="delApp(item.lid)">
                            <img style="width: 20px;" src="../assets/img/cha.svg" alt="">
                        </div> -->
                    </div>
                    <div class="footListCon" @click="lookMore">
                        <div class="footListConimg">
                            <i style="color: #1662E4;font-size: 22px;" class="el-icon-more"></i>
                        </div>
                        <div class="TabListName">
                            <span>
                               查看更多
                            </span>
                        </div>
                        <div class="TabListBri">
                                <span>
                                    点击查看更多AI应用
                                </span>
                        </div>
                    </div>
                </div>

                <div v-if="CocoFlowList.length" class="footList2">
                    <div class="footListCon6" v-for="(item,index) in CocoFlowList" @click="openNewWindow(item)" :key="index+'4p'">
                        <div class="footListConimg">
                            <!-- <img style="margin-bottom: 12px;height: 24px;width: 22px;" :src="JSON.parse(item.json).icon" alt=""> -->
                            <img v-if="fromL.admin.cocoFlow2[index] && fromL.admin.cocoFlow2[index].setIcon" 
                                class="footListConimgPic"
                                :src="fromL.admin.cocoFlow2[index].setIcon" alt="">
                            <img v-else class="footListConimgPic" :src="JSON.parse(item.json).icon" alt="">
                            
                            <!-- <img v-else class="footListConimgPic" :src="require('../assets/img/cocoflow2.svg')" alt=""> -->
                        </div>
                        <div class="TabListName">
                            <el-tooltip class="item" effect="light" :content="item.name" placement="bottom">
                                <span>
                                    {{ item.name }}
                                </span>
                            </el-tooltip>
                        </div>
                        <div class="TabListBri">
                            <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
                                <span>
                                    {{ item.detail }}
                                </span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
<!-- 
                <div class="footList2">
                    <div class="footList2Tit">
                        常用应用
                    </div>

                    <div class="footListCon6" v-for="(item,index) in CocoFlowList" @click="openNewWindow(item)" :key="index+'4p'">
                        <div class="footListConimg">
                            <img style="margin-bottom: 12px;height: 24px;width: 22px;" :src="JSON.parse(item.json).icon" alt="">
                        </div>
                        <div class="TabListName">{{ item.name }}</div>
                        <div class="TabListBri">
                            <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
                                <span>
                                    {{ item.detail }}
                                </span>
                            </el-tooltip>
                        </div>
                        <div class="cha" @click.stop="delApp(item.lid)">
                            <img style="width: 15px;" src="../assets/img/cha.svg" alt="">
                        </div>
                    </div>

                    <div v-for="(i,index) in (4 - CocoFlowList.length)" @click="openUsuallyApp" 
                    :key="index+'3p'" class="footListCon2">
                        <div style="margin-bottom: 8px;font-size: 40px;color: #0354D7;">
                            <img src="../assets/img/add.svg" alt="">
                        </div>
                    </div> 
                </div> -->
            </div>
            
        </div>

        <!-- 常见应用弹框 -->
        <el-dialog
        title="应用列表"
        :visible.sync="dialogVisible"
        class="moreDia"
        :close-on-click-modal="false"
        :modal="false"
        width="60%"
        :before-close="handleClose">
            <div v-loading="loading" style="display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 16px;height: 100%;overflow: auto;">
                <div v-for="(item,index) in isAdd(usuallyList)" class="tabCon" @click="openNewWindow(item)"  :key="index+'6p'" style="min-width: 308px;">
                        <div class="AppList">
                            <img class="appImg" :src="JSON.parse(item.json).icon" alt="">
                            <div class="con">
                                <div class="tit">{{ item.name }}</div>
                                <div class="bri">
                                    <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
                                        <span>
                                            {{ item.detail }}
                                        </span>
                                    </el-tooltip>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import store from '../store'
import { API_CONFIG } from "@/common/apiConfig";
import { myMixin } from "@/mixins/mixin.js"
// import axios from '@/common/axios.config'; // 引入 axios 配置实例

    export default {
        mixins: [ myMixin ],

        computed: {
            ...mapGetters(['userinfo','userinfo2','fromL']),
            // banner循环图
            // bannerL(){
            //     return function(val){
            //         console.log('val',val);
            //         return val.split(',')
            //     }
            // },
            // 如果hk，com没有图标，默认使用cn的
            AppCon(){
                return function(c) {
                    let k = JSON.parse(JSON.stringify(c))

                    // 获取属于区域的url
                    let data = k.filter(e=>{
                        return e.region == this.roleUser.schoolArea || e.region == this.roleUser.orgArea
                    })

                    // 设置默认的区域的url(所在区域没有hover图标默认使用cn图标)
                    let data2 = k.filter(e=>{
                        return e.region == 'cn'
                    })
                    
                    // 如果hk，com没有图标，默认使用cn的
                    if (!data[0].icon){
                        data[0].icon = data2[0].icon
                        data[0].activeIcon = data2[0].activeIcon
                    }
                    
                    return data
                };
            },

            // 判断是否被添加过
            isAdd(){
                return function(val){
                    const difference = val.filter(item1 => 
                        !this.CocoFlowList.some(item2 => item1.id === item2.id)
                    );
                    return difference
                }
            },
            roleUser(){
                return Object.keys(this.userinfo2).length != 0 ? this.userinfo2 : this.userinfo
            }
        },
        data() {
            return {
                // 判断链接时liyuan还是admin的
                // platform:'',
                // 判断链接时beta还是cloud的
                betaL:'beta',
                dialogVisible:false, 
                //常见ai应用列表（添加弹框）
                usuallyList:[], 
                loading:false,
                // 管理平台添加常见cocoFlow应用
                admincocoFlow:[],
                // 用户ai应用数组
                CocoFlowList:[],
                // 平台工具 
                tabList:[],
                // 后台未设置常用应用后使用默认应用，这些是默认应用的头像
                appImgList:[
                    require('../assets/img/img7.svg'),
                    require('../assets/img/img8.svg'),
                    require('../assets/img/img2.svg'),
                    require('../assets/img/img6.svg'),
                    require('../assets/img/img5.svg'),
                    require('../assets/img/img1.svg'),
                    require('../assets/img/img4.svg'),
                    require('../assets/img/img3.svg'),
                ],
                liyuanTab:[
                    {toolId:'CourseCon',name:'课程建设',icon:require('../assets/toppage/classbuild.svg'),hoverIcon:''},
                    {toolId:'teacherDevelop',name:'教师发展',icon:require('../assets/toppage/tealep.svg'),hoverIcon:''},
                    {toolId:'aiOffice',name:'智能教务',icon:require('../assets/toppage/aiwork.svg'),hoverIcon:''},
                    {toolId:'lyStudentEva',name:'学生评价',icon:require('../assets/toppage/stueva.svg'),hoverIcon:''},
                    {toolId:'schoolSafe',name:'平安校园',icon:require('../assets/toppage/safesch.svg'),hoverIcon:''},
                ]
            }
        },
        methods: {
            // 轮播图跳转链接
            gotoBanner(val){
                if (val == '') return
                window.open(val, "_blank");
            },
            // 首页平台应用浮动效果
            setHovered(index, value) {
                this.tabList[index].hovered = value;
            },
            // 获取cocoFlow2应用
            getData(){
                let cocoFlowCopy = []
                if (this.fromL.admin.cocoFlow2 && this.fromL.admin.cocoFlow2.length) {
                    cocoFlowCopy = this.fromL.admin.cocoFlow2.map(item => item.id);
                }else{
                    return
                }
                    // let appList=[
                    //     "4aed8607-19e1-11f0-a66a-005056924926",
                    //     "337f9d06-1eb6-11f0-a66a-005056924926",
                    //     "52b4aae8-088d-11f0-b508-005056924926",
                    //     "5c95f692-1460-11f0-bad1-005056924926"
                    // ]

                    let params = [
                        {
                            functionName: API_CONFIG.ajax_AdminApp.functionName,
                            con: cocoFlowCopy.join(','), 
                        },
                    ];
                
                this.$ajax
                    .post(API_CONFIG.baseUrl, params)
                    .then((res) => {
                        let _data = res.data[0];

                        this.CocoFlowList = cocoFlowCopy.map(id => _data.find(item => item.id === id));

                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("获取工具数据失败");
                    });
            },
            // 筛选可用平台工具,判断是否管理员可见，去除已删除工具
            siftCoco(){
                let data = []
                let val = JSON.parse(JSON.stringify(this.fromL.admin.index.list))
                
                // 用户是管理员全部展示
                if (this.roleUser.type == 1 && this.roleUser.role == 1) {
                    val.forEach( e =>{
                        if (e.status == 0) {
                            data.push(e)
                        }
                    })
                } else {
                    // 用户不是管理员，判断是否为用户可见 isAdmin 0普通用户 status是否被删除
                    val.forEach( e =>{
                        if (e.isAdmin == '0' && e.status == 0) {
                            data.push(e)
                        }
                    })
                }

                this.tabList = data
                // console.log('this.tabList',this.tabList);
            },
            // 获取cocoFlow应用
            getAdmincocoFlow(){
                // 筛选可用平台工具,判断是否管理员可见，去除已删除工具
                this.siftCoco()
                let appList= []

                if (this.fromL.admin.cocoFlow.length > 0) {
                    appList = this.fromL.admin.cocoFlow.map(item => item.id);
                } else {
                    appList= [
                        "d1edef14-ef6f-11ef-b508-005056924926",
                        "701615ab-ffe8-11ef-b508-005056924926",
                        "a8781a86-00d8-11f0-b508-005056924926",
                        "ee61f383-0311-11f0-b508-005056924926",
                        "38ee6402-0539-11f0-b508-005056924926",
                        "1c83613c-ffb7-11ef-b508-005056924926",
                        "0d3d87bd-00b6-11f0-b508-005056924926",
                        "2d05a12a-f0e7-11ef-b508-005056924926",
                    ]
                }
                 let params = [
                        {
                            functionName: API_CONFIG.ajax_AdminApp.functionName,
                            con: appList.join(',') 
                        },
                    ];
                    
                    this.$ajax
                        .post(API_CONFIG.baseUrl, params)
                        .then((res) => {
                            console.log('res',res);
                            
                            let _data = res.data[0]
                            
                            let appli = appList.map(id => _data.find(item => item.id === id));
                            console.log('appli',appli);
                            let allCon = appli.filter(Boolean);

                            this.admincocoFlow = allCon.slice(0,7)


                        })
                        .catch((err) => {
                            console.log(err);
                            this.$message.error("获取工具数据失败");
                        });
            },

            // 打开平台应用
            async openApp(val){
                console.log('val',val);

                // 点击相同应用不刷新
                if (this.appSign == val.toolId) return
                // 更新标识
                await store.commit('user/SET_AppSIGN', val.toolId)
                
                let url = ''
                val.url.forEach(e => {
                     // if (e.region == this.roleUser.schoolArea || e.region == this.roleUser.orgArea) {
                    if (e.region == this.$region) {
                        url = e.url
                    }
                });
                // console.log('_userinfo',JSON.parse(JSON.stringify(this.roleUser)));

                let _userinfo = this.roleUser, //登录用户信息
                { userid: _userid, organizeid: _oid, type: _type, org: _org, role: _role, classid: _classId } = _userinfo; // 解构赋值获取用户信息
                const _TscreenType = 1, _SscreenType = 3; // 常量定义
                let queryString = ''
                if(val.argumentList && val.argumentList.length){
                    const paramsMap = {
                    userid: _userid,
                    org: _org,
                    oid: _oid,
                    tType: _type,
                    role: _role,
                    classId: _classId,
                    TscreenType: _TscreenType,
                    SscreenType: _SscreenType
                    };
                    console.log('vallllllllllllll',val.argumentList);
                    
                    const canshu = val.argumentList
                    .filter(param => paramsMap[param] !== undefined || param === 'type')
                    .map(param => param === 'type' ? `tType=${paramsMap['tType']}` : `${param}=${paramsMap[param]}`);

                    queryString = canshu.length ? (url.includes('?') ? '&' : '?') + canshu.join('&') : ''; // 生成查询字符串
                }

                let _url = url + queryString
                console.log('_url',_url);

                let pl = {json:_url ,stateL :true,toolId :val.toolId}
                
                this.$emit('cutUrl',pl)

                this.addOp3('1', "", { type:this.prefixL + val.toolId + "_open" }, "success")
                
            },
            async openApp2(val){
                console.log(val);
                let url = ''
                let argumentList = ['userid', 'oid', 'org','role','tType']
                if (this.betaL == 'beta') {
                    url = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/${val.toolId}`
                }else{
                    `https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/${val.toolId}`
                }


                // return
                // 点击相同应用不刷新
                if (this.appSign == val.toolId) return
                // 更新标识
                await store.commit('user/SET_AppSIGN', val.toolId)


                let _userinfo = this.roleUser, //登录用户信息
                { userid: _userid, organizeid: _oid, type: _type, org: _org, role: _role, classid: _classId } = _userinfo; // 解构赋值获取用户信息
                const _TscreenType = 1, _SscreenType = 3; // 常量定义
                let queryString = ''
                if(argumentList && argumentList.length){
                    const paramsMap = {
                    userid: _userid,
                    org: _org,
                    oid: _oid,
                    tType: _type,
                    role: _role,
                    classId: _classId,
                    TscreenType: _TscreenType,
                    SscreenType: _SscreenType
                    };
                    
                    const canshu = argumentList
                    .filter(param => paramsMap[param] !== undefined || param === 'type')
                    .map(param => param === 'type' ? `tType=${paramsMap['tType']}` : `${param}=${paramsMap[param]}`);

                    queryString = canshu.length ? (url.includes('?') ? '&' : '?') + canshu.join('&') : ''; // 生成查询字符串
                }

                let _url = url + queryString
                console.log('_url',_url);

                let pl = {json:_url ,stateL :true,toolId :val.toolId}
                
                this.$emit('cutUrl',pl)

                this.addOp3('1', "", { type:this.prefixL + val.toolId + "_open" }, "success")
            },
            // 打开CocoFlow应用
            openNewWindow(val) {
                console.log(val);
                this.addOp3('1', "", {id :val.id,name:val.name ,type:this.prefixL + "appstoreOpen" }, "success")

                // // 基本用法：打开指定 URL
                window.open(val.url, "_blank");
            },
             // 打开常见应用弹框
            async lookMore(){
                let val = ''
                if (this.roleUser.organizeid == '6a695e62-1b6e-11f0-a66a-005056924926') {
                    val = {
                        id: "746ce524-0bae-11f0-baea-005056924926",
                        toolId: "appStoreLiYuan",
                        dialogWidth: '100',
                        dialogHeight: '100',
                        description: "荔园的CocoFlow",
                        isAdmin: '0',
                        argumentList: "[\"userid\",\"oid\",\"org\",\"role\"]",
                        url: "[{\"region\":\"cn\",\"url\":\"https://app.cocorobo.cn/#/\",\"icon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/appStore1743150350993.png\",\"name\":\"AI应用\",\"platformIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/appStore1743150353110.png\",\"activeIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Property%201%3DDefault%20%281%291746585029787.svg\",\"defaultIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Property%201%3DDefault1746585025868.svg\",\"hoverIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Property%201%3DDefault%20%281%291746585032396.svg\"},{\"region\":\"beta\",\"url\":\"https://beta.app.cocorobo.cn/#/\",\"icon\":\"\",\"name\":\"AI应用\",\"platformIcon\":\"\",\"activeIcon\":\"\",\"defaultIcon\":\"\"},{\"region\":\"hk\",\"url\":\"https://app.cocorobo.hk/#/\",\"icon\":\"\",\"name\":\"CocoFlow\",\"platformIcon\":\"\",\"activeIcon\":\"\",\"defaultIcon\":\"\"},{\"region\":\"com\",\"url\":\"https://app.cocorobo.com/#/\",\"icon\":\"\",\"name\":\"CocoFlow\",\"platformIcon\":\"\",\"activeIcon\":\"\",\"defaultIcon\":\"\"}]",
                        json: "\"\"",
                        status: "0"
                    }
                }else{
                    val = {
                        id: "dd87149c-1f52-11f0-a66a-005056924926",
                        toolId: "appStore",
                        dialogWidth: '100',
                        dialogHeight: '100',
                        description: "CocoFlow",
                        isAdmin: '0',
                        argumentList: "[\"userid\",\"oid\",\"org\",\"role\"]",
                        url: "[{\"region\":\"cn\",\"url\":\"https://app.cocorobo.cn/#/\",\"icon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/appStore1743150350993.png\",\"name\":\"CocoFlow\",\"platformIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/appStore1743150353110.png\",\"activeIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/marketeq_home-alt-3%20%282%291744697451173.svg\",\"defaultIcon\":\"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/marketeq_home-alt-3%20%281%291744697448514.svg\"},{\"region\":\"beta\",\"url\":\"https://beta.app.cocorobo.cn/#/\",\"icon\":\"\",\"name\":\"CocoFlow\",\"platformIcon\":\"\",\"activeIcon\":\"\",\"defaultIcon\":\"\"},{\"region\":\"hk\",\"url\":\"https://app.cocorobo.hk/#/\",\"icon\":\"\",\"name\":\"CocoFlow\",\"platformIcon\":\"\",\"activeIcon\":\"\",\"defaultIcon\":\"\"},{\"region\":\"com\",\"url\":\"https://app.cocorobo.com/#/\",\"icon\":\"\",\"name\":\"CocoFlow\",\"platformIcon\":\"\",\"activeIcon\":\"\",\"defaultIcon\":\"\"}]",
                        json: "\"\"",
                        status: "0"
                    }
                }

                val.url = JSON.parse(val.url)
                val.argumentList = JSON.parse(val.argumentList)
                

                this.openApp(val)
                
            },
            handleClose(){
                this.usuallyList= []
                this.dialogVisible = false
            },
        },
        mounted(){
            // this.platform = window.location.href.includes("liyuan") ? "liyuan_" : "admin_"
            // this.betaL = window.location.href.includes("beta") ? "beta" : "cloud"
        }
    }
</script>


<style scoped>

 /*指示器按钮*/
.CarO >>> .el-carousel__button {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}
/*指示器激活按钮*/
.CarO >>> .is-active .el-carousel__button {
  background: #0663FE;
}
.topPageCon{
    display: flex;
    flex-direction: column;
}
/* 顶部区域 */
.topBlock{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.topTit{
    font-size: 30px;
    height: 100%;
    color: #000;
    font-weight: 600;
}
.topDetail{
    color: #64748B;
    margin-top: 16px;
}



/* 平台应用 */
.TabList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* 网格间距 */
    margin: 26px 0 40px;
}
.TabListAdmin{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px; /* 网格间距 */
    margin: 56px 0 40px;
}

.TabListAll{
    position: relative !important;
    display: flex;
    height: 140px;
    justify-content: flex-end;
}
.TabListAll2{
    position: relative !important;
    display: flex;
    height: 140px;
    justify-content: center;
    align-items: end;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}
.tabTit{
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
}
.imgApp{
    width: 120px;
    height: 140px;
    object-fit: contain;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%) !important;
    left: 0px;
}
.TabListCon{
    width: 170px;
    height: 140px;
    padding: 24px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    width: calc(100% - 60px);
    transition: all 0.3s ease; /* 统一过渡效果 */
    background-size: 20px 20px;
    cursor: pointer;
    box-shadow: 0px 4px 10px 0px #0000000D;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: end;
}
.TabListCon:hover{
    width: calc(100% - 50px);
    height: 125px;
    margin-right: 10px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.TabListCon:hover TabListBri{
    -webkit-line-clamp: 2;
    width: 150px;
}
.TabListName{
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
    margin-bottom: 4px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.TabListBri{
    color: rgba(0,0,0,.6);
    font-size: 14px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabCon{
    transition: all 0.3s ease; /* 统一过渡效果 */
    border-radius: 10px;
    cursor: pointer;
}

/* 常见应用样式 */
.footCon{
    display: flex;
    /* padding-top: 30px; */
    /* height: 350px; */
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: 10px;
    /* margin: 80px 0; */
    /* background-image: radial-gradient(#E6F0FF 1px, transparent 1px); */
    background-size: 20px 20px;
}

/* 图片 */
.footConLeft{
    width: 375px;
    min-width: 150px;
    box-sizing: border-box;
    display: flex;
    padding-right: 40px;
    object-fit: contain;
}
.footConLeft img{
    min-width: 150px;
    border-radius: 15px;
    object-fit: cover;
    /* object-view-box: inset(0% 12px 30px 30px); */
}
.CutImg{
    width: 100% !important;
    object-view-box: inset(0% 12px 30px 30px);
}
.CocoTit{
    width: 100%;
    min-width: 150px;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 10%;
    height: 83px;
    padding: 20px;
    box-sizing: border-box;
    line-height: 83px;
    background: #0663FE;
    border-radius: 12px;
    color: #fff;

}

/* 中间后面设置应用 */
.footList{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr); /* 创建两行，每行高度相等 */
    gap: 16px; /* 网格间距 */
    flex: 2;
}
/* .footListCon{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 22.4px 0px #0000000D;
    padding: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease; 
    cursor: pointer;
} */
.footListCon,
.footListCon6{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 22.4px 0px #0000000D;
    padding: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease; /* 统一过渡效果 */
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}
.footListCon6:hover .cha{
    display: block;
}

.footListCon6:hover{
    transform: translate(-5px,-10px); /* 向上位移 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.footListCon:hover{
    transform: translate(-5px,-10px); /* 向上位移 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.footListConimg{
    height: 40%;
    padding-top: 8px;
    box-sizing: border-box;
}
.footListConimgPic{
    margin-bottom: 12px;height: 40px;width: 40px;object-fit: contain;
}
.cha{
    display: none;position: absolute;top: 10px;right: 10px;
}
.footListCon:hover .cha{
    display: block;
}

/* 添加常见应用区域 */
.footList2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); /* 创建两行，每行高度相等 */
    gap: 16px;
    flex: 1;
    position: relative;
}
.footList2Tit{
    position: absolute;
    top: -30px;
    left: 0;
    font-family: PingFang SC;
    color: #000;
}

.footListCon2{
    display: flex;
    cursor: pointer;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px dashed  #000000;
    box-sizing: border-box;
    border-radius: 12px;
    border-width: 1px;
    background-color: #E5E5E5;
}
.footListCon2:hover {
    background: #C9C9C9;
}



/* 弹框 */
.moreDia >>> .el-dialog{
    border-radius: 10px;
}
.moreDia >>> .el-dialog__body{
    height: 500px;
    /* overflow: auto; */
    border-top: 1px #e7e7e7 solid;
}
/* 对号 */
.top{
    display: flex;
    height: 154px;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    margin-bottom: 14px;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
}

.AppList{
    flex-wrap: wrap;display: flex;
    justify-content: space-between;
    border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
    border-radius: 10px;padding: 16px;box-sizing: border-box;
    position: relative;
}
.appImg{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.con{
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tit{
    color: #1f2937;font-size: 16px;height: 24px;line-height: 24px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bri{
    color: #6b7280;font-size: 12px;height: 16px;line-height: 16px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

</style>