<template>
    <div style="display: flex; flex-direction: column; gap: 20px; height: 100%">
        <div class="top">
            <div class="topTit">
                <div>
                    <div>集团简介</div>
                    <div style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"></div>
                </div>
                <div>
                    <img v-if="userinfo.role == 1 && userinfo.type == 1" class="topTitEdit" @click="editregion(0)"
                        src="../../../assets/img/bianji.svg" alt="" />
                </div>
            </div>
            <div class="Topbri">
                {{ fromL.admin.CampusF ? fromL.admin.CampusF.GroupBri : "暂无简介" }}
            </div>
        </div>

        <div class="feature">
            <div class="topTit">
                <div>
                    <div>办学特色</div>
                    <div style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"></div>
                </div>
                <div>
                    <img v-if="userinfo.role == 1 && userinfo.type == 1" class="topTitEdit" @click="editregion(1)"
                        src="../../../assets/img/bianji.svg" alt="" />
                </div>
            </div>

            <div class="featureAll">
                <template v-if="featureList.length">
                    <div class="featureCon" v-for="(i, index) in featureList" :key="index">
                        <img style="width: 34px; height: 34px; object-fit: contain" :src="i.icon" alt="" />
                        <div class="featureConTit">{{ i.name }}</div>

                        <el-tooltip class="item" effect="dark" :content="i.bri" placement="bottom">
                            <div class="Topbri2">{{ i.bri }}</div>
                        </el-tooltip>
                    </div>

                </template>
                <div v-else>
                    暂无数据
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="topTit">
                <div>
                    <div>师资力量</div>
                    <div style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"></div>
                </div>
                <div>
                    <img v-if="userinfo.role == 1 && userinfo.type == 1" class="topTitEdit" @click="editregion(2)"
                        src="../../../assets/img/bianji.svg" alt="" />
                </div>
            </div>
            <div class="Topbri">
                <el-tooltip class="item" effect="dark" :content="fromL.admin.CampusF ? fromL.admin.CampusF.teacherN.teaBri : '暂无数据'
                    " placement="bottom">
                    <span>
                        {{ fromL.admin.CampusF ? fromL.admin.CampusF.teacherN.teaBri : "暂无简介" }}
                    </span>
                </el-tooltip>
            </div>

            <div class="featureAll" v-if="teaData.length">
                <div class="featureCon2" v-for="(i, index) in teaData" :key="index">
                    <div class="featureConTit2">{{ i.bri }}</div>
                    <div class="Topbri">{{ i.name }}</div>
                </div>
            </div>
            <div v-else>
                暂无数据
            </div>
        </div>

        <div class="feature">
            <div class="topTit">
                <div>
                    <div>特色应用</div>
                    <div style="
							height: 4px;
							background-color: #0663fe;
							width: 2rem;
							margin-top: 6px;
						"></div>
                </div>
                <div>
                    <img v-if="userinfo.role == 1 && userinfo.type == 1" class="topTitEdit" @click="editregion(4)"
                        src="../../../assets/img/bianji.svg" alt="" />
                </div>
            </div>

            <div class="AppStoreList" :class="{ 'AppStoreList2': CampusF.appList && CampusF.appList.length === 0 }">
                <template v-if="CampusF.appList && CampusF.appList.length">
                    <div class="AppStore" v-for="(i, index) in CampusF.appList" :key="index" @click="openNewWindow(i)">
                        <!-- <img style="width: 24px;" src="../../../assets/img/bianji.svg" alt=""> -->
                        <div class="AppStoreCon">
                            <img style="
									width: 32px;
									height: 32px;
									margin-bottom: 10px;
									object-fit: contain;
								" :src="i.setIcon ? i.setIcon : i.json.icon" alt="" />
                            <div class="AppStoreConTit">{{ i.name }}</div>
                            <el-tooltip class="item" effect="dark" :content="i.detail" placement="bottom">
                                <div class="AppStoreConBri">{{ i.detail }}</div>
                            </el-tooltip>
                        </div>
                    </div>
                </template>
                <div v-else>
                    暂无数据
                </div>
                <div class="AppStore" v-if="userinfo.role == 1 && userinfo.type == 1" @click="editregion(3)"
                    :style="{ maxWidth:CampusF.appList && CampusF.appList.length === 0 ? '301px' : 'auto' }">
                    <!-- <div style="height: 24px;"></div> -->
                    <div class="AppAdd">
                        <img src="../../../assets/img/add.svg" alt="" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改校区特色弹框 -->
        <el-dialog :title=editTitle :visible.sync="editVisible" close-on-click-modal class="Fedialog"
            :before-close="handleClose">
            <el-input v-if="isBtn === 0" type="textarea" :rows="4" placeholder="请输入内容" v-model="CampusF.GroupBri">
            </el-input>

            <el-table :data="CampusF.feature" v-if="isBtn === 1" stripe border style="width: 100%">
                <el-table-column label="icon" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <img style="height: 30px; width: 30px; object-fit: cover" :src="scope.row.icon" alt="" />
                    </template>
                </el-table-column>

                <el-table-column label="标题" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">{{
                        scope.row.name ? scope.row.name : "-"
                    }}</template>
                </el-table-column>

                <el-table-column label="简介" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">{{
                        scope.row.bri ? scope.row.bri : "-"
                    }}</template>
                </el-table-column>

                <el-table-column label="修改" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <button @click="editRunS(scope.$index, scope.row, 0)" style="
								color: #308fff;
								background: none;
								border: none;
								cursor: pointer;
								margin-left: 25px;
							">
                            修改
                        </button>
                        <button v-if="CampusF.feature.length > 1" @click="delFe(scope.$index, 0)" style="
								color: red;
								background: none;
								border: none;
								cursor: pointer;
								margin-left: 25px;
							">
                            删除
                        </button>
                        <button v-if="scope.$index == CampusF.feature.length - 1" @click="addCon(0)" style="
								color: #308fff;
								background: none;
								border: none;
								cursor: pointer;
								margin-left: 25px;
							">
                            添加
                        </button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="ea_appList" v-if="isBtn === 2">
                <el-input style="margin-bottom: 10px" type="textarea" :rows="2" resize="none" placeholder="请输入描述"
                    v-model="CampusF.teacherN.teaBri">
                </el-input>
                <el-table :data="CampusF.teacherN.list" stripe border style="width: 100%">
                    <el-table-column label="标题" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.name ? scope.row.name : "-" }}
                        </template>
                    </el-table-column>

                    <el-table-column label="简介" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">{{
                            scope.row.bri ? scope.row.bri : "-"
                        }}</template>
                    </el-table-column>

                    <el-table-column label="修改" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <button @click="editRunS(scope.$index, scope.row, 1)" style="
									color: #308fff;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 25px;
								">
                                修改
                            </button>

                            <button v-if="CampusF.teacherN.list.length > 1" @click="delFe(scope.$index, 1)" style="
									color: red;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 25px;
								">
                                删除
                            </button>

                            <button v-if="scope.$index == CampusF.teacherN.list.length - 1" @click="addCon(1)" style="
									color: #308fff;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 25px;
								">
                                添加
                            </button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="ea_appList" v-if="isBtn === 3" v-loading="appLoading">
                <div style="
						display: grid;
						grid-template-columns: repeat(3, minmax(0, 1fr));
						gap: 20px;
					">
                    <div class="appItem" v-for="item in allApp(appList)" :key="item.id"
                        :class="{ appActive: isSel(item) }" @click="toggleSelection(item)">
                        <div class="ai_left">
                            <el-image style="width: 100%; height: 100%; cursor: pointer"
                                :src="item.setIcon ? item.setIcon : item.json.icon" fit="cover"></el-image>
                        </div>
                        <div class="ai_right">
                            <div>{{ item.name }}</div>
                            <div class="ai_r_btn"></div>
                            <span>{{ item.detail }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ea_appList" v-if="isBtn === 4">
                <el-table :data="CampusF.appList" v-if="isBtn === 4" stripe border style="width: 100%">
                    <el-table-column label="icon" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <img style="height: 30px; width: 30px; object-fit: cover" :src="scope.row.setIcon ? scope.row.setIcon : scope.row.json.icon
                                " alt="" />
                        </template>
                    </el-table-column>

                    <el-table-column label="名称" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="简介" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.detail }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <button @click="editRunS(scope.$index, scope.row, 2)" style="
									color: #308fff;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 25px;
								">
                                修改
                            </button>
                            <button v-if="fromL.admin.CampusF.appList.length > 1" @click="delFe(scope.$index, 2)" style="
									color: red;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 25px;
								">
                                删除
                            </button>

                            <!-- 上移按钮 -->
                            <button v-if="scope.$index != 0" @click="moveUp(scope.$index)" style="
									color: #308fff;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 10px;
								">
                                上移
                            </button>

                            <!-- 下移按钮 -->
                            <button v-if="scope.$index != CampusF.appList.length - 1" @click="moveDown(scope.$index)"
                                style="
									color: #308fff;
									background: none;
									border: none;
									cursor: pointer;
									margin-left: 10px;
								">
                                下移
                            </button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <!-- 添加特色应用按钮 -->
                <el-button v-if="isBtn === 3" type="primary" @click="getNewApp">确定</el-button>
                <el-button v-else type="primary" @click="setJson">确 定</el-button>
            </span>
        </el-dialog>

        <addCampusDialog ref="addCampusDialogRef" @success="addCampusSuccess" />
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { API_CONFIG } from "../../../common/apiConfig.js";
import addCampusDialog from "./addCampusDialog";
import { myMixin } from "@/mixins/mixin.js";

import axios from "@/common/axios.config"; // 引入 axios 配置实例
import store from "../../../store";

export default {
    mixins: [myMixin],

    components: {
        addCampusDialog,
    },
    data() {
        return {
            featureApp: [],
            // 判断弹框是添加还是编辑
            editTtype: 0,
            // 添加与编辑弹框显示
            editVisible: false,

            loading: false,
            appLoading: false,

            // 判断点击的哪个部分的编辑按钮
            isBtn: -1,

            // 所有应用列表
            appList: [],

            // 页面校区特色数据
            CampusF: [],

            // 储存选择特色应用
            selectedItem: [],

            // 修改校区特色信息
            CampusData: "",
            CampusType: 0,
            // 0 办学特色 1 师资力量
            CampusNum: 0,
        };
    },
    computed: {
        ...mapGetters(["fromL", "userinfo"]),
        featureList() {
            if (this.fromL.admin.CampusF) {
                return this.fromL.admin.CampusF.feature; // 从 Vuex 的 fromL 中获取 featureList
            } else {
                return [];
            }
        },
        teaData() {
            if (this.fromL.admin.CampusF) {
                return this.fromL.admin.CampusF.teacherN.list; // 从 Vuex 的 fromL 中获取 teaData
            } else {
                return [];
            }
        },
        allApp() {
            return function (val) {
                const difference = val.filter(
                    (item1) =>
                        !this.CampusF.appList.some((item2) => item1.id === item2.id)
                );
                return difference;
            };
        },
        isSel() {
            return function (val) {
                let res5 = this.selectedItem.some(function (item) {
                    return item.id == val.id;
                });
                return res5;
            };
        },
        editTitle() {
            if (this.isBtn == 0) return "编辑集团简介";
            else if (this.isBtn == 1) return "编辑办学特色";
            else if (this.isBtn == 2) return "编辑师资力量";
            else if (this.isBtn == 3) return "添加特色应用";
            else if (this.isBtn == 4) return "编辑特色应用";
            else return ""; // 默认值
        },
    },
    methods: {
        // 点击区块编辑
        async editregion(type) {
            if (type == 3) this.getAppData();
            this.isBtn = type;
            this.editVisible = true;
            this.appLoading = true;
        },
        handleClose() {
            this.editVisible = false;
            this.isBtn = -1;
            this.appList = [];

            // 修改校区特色信息
            this.CampusData = "";
            this.CampusType = 0;
            // 0 办学特色 1 师资力量
            this.CampusNum = 0;

            if (this.fromL.admin.CampusF) {
                this.CampusF = JSON.parse(JSON.stringify(this.fromL.admin.CampusF));
            }
        },
        // 上移
        moveUp(index) {
            if (index > 0) {
                const list = this.CampusF.appList;
                const temp = list[index];
                this.$set(list, index, list[index - 1]);
                this.$set(list, index - 1, temp);
            }
        },

        // 下移
        moveDown(index) {
            const list = this.CampusF.appList;
            if (index < list.length - 1) {
                const temp = list[index];
                this.$set(list, index, list[index + 1]);
                this.$set(list, index + 1, temp);
            }
        },
        //  0 办学特色 1 师资力量
        addCon(type) {
            this.CampusType = type;

            // this.CampusF.feature.push({bri:'',icon:'',name:''})
            if (type == 0) {
                this.CampusNum = this.CampusF.feature.length;
                this.$refs.addCampusDialogRef.open({ bri: "", icon: "", name: "" },
                    type,
                    "添加办学特色"
                );
            } else {
                this.CampusNum = this.CampusF.teacherN.list.length;
                this.$refs.addCampusDialogRef.open({ bri: "", name: "" },
                    1,
                    "添加师资力量"
                );
            }
        },
        // // 添加师资力量
        // add2() {
        // 	this.CampusType = 1;
        // 	this.$refs.addCampusDialogRef.open({ bri: "", name: "" }, 1);

        // 	// this.CampusF.teacherN.list.push()
        // },
        // 修改办学特色
        editRunS(index, val, type) {
            this.CampusData = val;
            this.CampusType = type;
            this.CampusNum = index;
            this.$refs.addCampusDialogRef.open(val, type);
        },
        //修改 0 办学特色 1 师资力量 2 特色应用
        addCampusSuccess(val) {
            console.log("val", val);
            console.log("CampusType", this.CampusType);

            if (this.CampusType == 0) {
                this.CampusF.feature.splice(this.CampusNum, 1, val.item);
            } else if (this.CampusType == 1) {
                this.CampusF.teacherN.list.splice(this.CampusNum, 1, val.item);
            } else {
                this.CampusF.appList.splice(this.CampusNum, 1, val.item);
            }
        },
        // 删除办学特色
        delFe(index, type) {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    // 用户点击“确定”后执行删除操作
                    if (type == 0) {
                        this.CampusF.feature.splice(index, 1);
                    } else if (type == 1) {
                        this.CampusF.teacherN.list.splice(index, 1);
                    } else {
                        this.CampusF.appList.splice(index, 1);
                    }
                    this.$message.success('删除成功！');
                })
                .catch(() => {
                    // 用户点击“取消”后执行的操作
                    this.$message.error('已取消删除');
                });
        },
        moveApp() { },
        getAppData() {
            return new Promise((resolve) => {
                let params = [
                    {
                        functionName: "select_schUsuallyApp",
                        userid: "",
                        stand: "cn",
                    },
                ];
                this.loading = true;
                this.$ajax
                    .post(API_CONFIG.baseUrl, params)
                    .then((res) => {
                        let _data = res.data;
                        let _list = _data[0];
                        _list.forEach((i) => {
                            i.json = JSON.parse(i.json);
                        });
                        this.appList = _list;
                        this.appLoading = false;
                        // console.log('_list', _list);

                        // this.loading = false;
                        resolve(_list);
                    })
                    .catch((err) => {
                        console.log(err);
                        // this.loading = false;
                        this.$message.error("获取应用数据失败");
                        // this.close();
                    });
            });
        },
        toggleSelection(item) {
            const index = this.selectedItem.findIndex((user) => user.id === item.id);

            if (index == -1) {
                this.selectedItem.push(item);
            } else {
                this.selectedItem.splice(index, 1);
            }
        },

        // 添加选中的应用
        getNewApp() {
            if (this.selectedItem.length == 0) {
                this.$message.warning("请先选择一个应用！");
                return;
            }

            this.CampusF.appList = [...this.CampusF.appList, ...this.selectedItem];

            this.selectedItem = []; // 清空选中状态
            this.editVisible = false;
            this.setJson();
        },
        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");
        },
        // 提交
        setJson() {
            this.loading = true;

            let _form = JSON.parse(JSON.stringify(this.fromL));

            _form.desktop.list = _form.desktop.list.map((i) => i.id);

            _form.admin.index.list = _form.admin.index.list.map((i) => i.id);

            _form.admin.sidebar.list.forEach((i, index) => {
                if (i.children) {
                    _form.admin.sidebar.list[index].children = i.children.map(
                        (i) => i.id
                    );
                } else {
                    _form.admin.sidebar.list[index] = i.id;
                }
            });

            _form.admin.cocoFlow = _form.admin.cocoFlow
                ? _form.admin.cocoFlow.map((i) => { return { id: i.id, setIcon: i.setIcon } }) : [];

            _form.admin.cocoFlow2 = _form.admin.cocoFlow2
                ? _form.admin.cocoFlow2.map((i) => { return { id: i.id, setIcon: i.setIcon } }) : [];

            _form.admin.CampusF = JSON.parse(JSON.stringify(this.CampusF));

            _form.admin.CampusF.appList = _form.admin.CampusF.appList.length
                ? _form.admin.CampusF.appList.map((i) => { return { id: i.id, setIcon: i.setIcon } }) : [];

            console.log("_form", _form);
            let params = [
                {
                    functionName: "update_orgOroid_json_byId",
                    id: this.userinfo.organizeid,
                    ujson: JSON.stringify(_form),
                    type: "school",
                },
            ];
            axios
                .post(API_CONFIG.baseUrl, params)
                .then(async (res) => {
                    let _data = res.data;
                    if (_data == 1) {
                        this.$message.success("修改权限成功");
                        // this.$emit("getData");

                        await store.dispatch("user/getschPerInfo");

                        // await addOp({
                        // 	uid: this.userid,
                        // 	cid: this.data.id,
                        // 	type: "user_op",
                        // 	content: `修改了${this.data.name}的权限设置`,
                        // });
                        this.handleClose();

                        this.addOp3(
                            "1",
                            "",
                            {
                                uid: this.userinfo.userid,
                                cid: this.userinfo.organizeid,
                                type: "user_op",
                                content: `修改了${this.userinfo.schoolName}的权限设置`,
                            },
                            "success"
                        );
                    } else {
                        this.$message.error("修改权限失败");
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                    this.$message.error("修改权限失败");

                    this.addOp3(
                        "1",
                        "",
                        {
                            uid: this.userid,
                            cid: this.data.id,
                            type: "user_op",
                            content: `修改了${this.data.name}的权限设置`,
                        },
                        err
                    );
                });
        },
    },
    mounted() {
        if (this.fromL.admin.CampusF) {
            this.CampusF = JSON.parse(JSON.stringify(this.fromL.admin.CampusF));
        } else {
            this.CampusF = {
                GroupBri: "暂无简介",
                feature: [
                    {
                        bri: "暂无简介",
                        icon: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/tese1745913146000.svg",
                        name: "默认标题",
                    },
                ],
                teacherN: {
                    teaBri: "暂无简介",
                    list: [{ bri: "默认标题", name: "暂无数据" }],
                },
                appList: [],
            };
        }
        console.log("CampusF", this.CampusF.appList);
    },
};
</script>

<style scoped>
.top {
    height: 159px;
    padding: 36px 27px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    justify-content: space-between;
}

.topTit {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #0663fe;
    display: flex;
    height: 36px;
    justify-content: space-between;
}

.topTit .topTitEdit {
    cursor: pointer;
}

.Topbri {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #000;
}

.Topbri2 {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feature {
    width: 100%;
    padding: 36px 27px;
    border-radius: 12px;
    box-sizing: border-box;
    background: #eeeeee;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.featureCon {
    background: #ffffff;
    width: 100%;
    height: 211px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
    padding: 40px 20px;
    align-items: center;
    box-sizing: border-box;
    gap: 18px;
}

.featureAll {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    gap: 20px;
}

.featureCon2 {
    background: #ffffff;
    width: 100%;
    height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
    padding: 40px 20px;
    align-items: center;
    box-sizing: border-box;
    gap: 10px;
}

.featureConTit {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #000;
}

.featureConTit2 {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    color: #0663fe;
}

.AppStoreList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    gap: 20px;
}

.AppStoreList2 {
    display: flex;
    flex-direction: column;
}

.AppStore {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 171px;
    min-width: 100px;
    cursor: pointer;
}

.AppStoreCon {
    border-radius: 10px;
    padding: 17px 17px;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
}

.AppAdd {
    height: 171px;
    border-radius: 10px;
    padding: 17px 17px;
    box-sizing: border-box;
    border: 1px dashed #000000;
    background: #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.AppStoreConTit {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.AppStoreConBri {
    font-family: PingFang SC;
    font-weight: 300;
    font-size: 14px;
    color: #969ba3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.AppStoreBri {
    font-family: PingFang SC;
    font-size: 10px;
    color: #969ba3;
}

.appItem {
    height: 100px;
    background-color: white;
    box-sizing: border-box;
    border: solid 1px #f3f4f6;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.appActive {
    border-color: #409eff;
    box-shadow: 0px 6px 30px 5px #00000015;
}

.appItem:hover {
    box-shadow: 0px 6px 30px 5px #00000015;
}

.ai_left {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
    margin-right: 10px;
}

.ai_right {
    width: calc(100% - 80px - 10px);
    position: relative;
}

.ai_right>div {
    max-width: calc(100% - 50px);
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
}

.ai_right>span {
    font-size: 14px;
    color: #00000099;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Fedialog>>>.el-dialog {
    width: 60% !important;
    min-width: 1000px;
    overflow: hidden;
    margin-top: 10vh !important;
}

.Fedialog>>>.el-dialog__header {
    padding: 15px 20px;
    background: #454545;
}

.Fedialog>>>.el-dialog__body {
    max-height: 70vh;
    /* 内容区域最大高度为视口高度的 70% */
    overflow-y: auto;
    /* 当内容超出时显示滚动条 */
    padding: 20px;
    /* 添加内边距 */
    box-sizing: border-box;
    /* 确保 padding 不影响宽度计算 */
}

.Fedialog>>>.el-dialog__title {
    color: #fff;
}
</style>
