<template>
<div class="demo-collapse">
<div class="box">
<div
class="title-list"
v-for="(item, index) in collapseLists"
:key="index"
>
<div class="title-wrap" @click="isOpen(index)">
<span class="title">{{ item.title }}</span>
<ArrowDownBold class="icon" />
</div>
<div :class="item.Flag ? 'content active' : 'content'">
{{ item.content }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
// 引入icon
import { ArrowDownBold } from "@element-plus/icons-vue";
// 定义是否展开的变量
const openFlag = ref<boolean>(false);
// 数据
const collapseLists = reactive([
{
title: "数据安全法",
content:
"(对您的数据进行安全评估)专业法律专家针对《中华人民共和国数据安全法》法律条款深度解读,提供基于国家立法背景下对各行业组织机构数据发展战略、安全合规路线的专业咨询建议。",
Flag: false,
},
{
title: "个人信息保护法",
content:
"(保护个人信息权益)专业法律专家针对《中华人民共和国个人信息保护法》法律条款深度解读,基于国家立法背景,为广大民众提高对个人信息合法权益保护的认知、各行业涉及个人信息处理服务的组织机构提升其合规度、专业度提供专业咨询建议。",
Flag: false,
},
{
title: "App合规检测",
content:
"(App、软件产品隐私数据合规性自动化检测服务。)App安全合规检测服务,是全面检测移动应用中存在的不合规项,包含App 收集使用个人信息行为、个人信息存储方式、第三方SDK行为分析、App 运营者对用户权益保障、等其他违规违法进行评测。深度挖掘APP隐私合规风险源头。",
Flag: false,
},
{
title: "企业风险管理",
content:
"(最小的成本收获最大的安全保障)风险管理是社会组织或者个人用以降低风险的消极结果的决策过程,通过风险识别、风险估测、风险评价,并在此基础上选择与优化组合各种风险管理技术,对风险实施有效控制和妥善处理风险所致损失的后果,从而以最小的成本收获最大的安全保障。",
Flag: false,
},
{
title: "数据资产管理合规检测",
content:
"(评估企业数据资产管理合规性)依据《中华人民共和国数据安全法》第二十一条,评估企业数据资产管理规范化水平,数据资产分类分级程度,生成数据资产管理合规报表,让管理人员实时了解公司数据资产管理合规现状。",
Flag: false,
},
{
title: "GDPR",
content:
"(GDPR是当今生效的最强有力的全球隐私法。)由欧盟创建,用于规范组织如何收集、处理和保护欧盟居民的个人数据。它旨在通过让数据主体控制其个人数据的获取、使用和共享的方式来加强隐私权。GDPR确定了严格的隐私保护标准,要求企业对个人数据存储、传输、访问方式以及审计进行更大力度地监督。",
Flag: false,
},
]);
const isOpen = (index: number) => {
if (collapseLists[index].Flag) {
collapseLists[index].Flag = false;
} else {
collapseLists.forEach((item) => {
item.Flag = false;
});
collapseLists[index].Flag = true;
}
};
</script>
<style lang="less" scoped>
.demo-collapse {
.box {
margin: auto;
position: relative;
display: flex;
flex-wrap: wrap;
width: 600px;
.title-list {
width: 300px;
.title-wrap {
border-bottom: 1px solid #ccc;
.title {
font-size: 20px;
height: 25px;
line-height: 25px;
}
.icon {
width: 20px;
height: 20px;
vertical-align: middle;
margin-top: -5px;
}
}
.content {
width: 600px;
overflow-y: hidden;
max-height: 0;
text-align: left;
// transition: all 0.3s;
}
.content.active {
border-bottom: 1px solid #ccc;
overflow-y: hidden;
max-height: 500px;
transition: all 1s;
}
}
.title-list:nth-child(2n) {
.content {
position: relative;
left: -300px;
}
}
}
}
</style>
vue3原生下拉
最新推荐文章于 2024-08-21 09:01:24 发布