Skip to content

D
DTBPcompnay
Commit 3a706aa4 authored by 陈毅's avatar 陈毅
Browse files
Options

catia初稿

parent d7b90f07
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 326 deletions
src/pages/product/catia.vue
View file @ 3a706aa4
<template>
<div>
<div class="pc">
<div class="product-introduce">
<div class="propduct-back">
<div class="propduct-background1">
<img class="img1" src="/image/catia/0301.png" alt="" />
</div>
<div class="propduct-background2">
<img src="/image/catia/0302.png" alt="" />
<h4>3D CAD设计和工程软</h4>
<div class="pc1">
<div class="pc1-top mt">
<div class="pc1-left">
<img :src="product[i].url1" width="100%" height="100%" alt="" />
</div>
<div class="pc1-right">
<img :src="product[i].url2" width="100%" height="50%" alt="" />
<div>
{{ product[i].title }}
</div>
</div>
<div class="title">
<div class="line"></div>
<p>{{ product.title }}</p>
<div class="line"></div>
</div>
<div class="pc1-head">
<div class="pc1-head-left"></div>
<h4>{{ product[i].top }}</h4>
<div class="pc1-head-right"></div>
</div>
<!-- 产品简介 -->
<div class="pc1-product">
<div class="instructions">
<h4>产品简介</h4>
<p class="beijng">INTRODUCTION</p>
</div>
<h5>产品简介</h5>
<h6>Product introduction</h6>
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj1
}}</span
>
<div v-if="product.jj2 != ''" class="jj2-div">
<br />
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
product.jj2
}}</span
>
<div class="pc1-pr-content">
<p>{{ product[i].product.p1 }}</p>
<p>{{ product[i].product.p2 }}</p>
</div>
</div>
<div class="advertisement">
<img style="width:1200px" src="/image/catia/0304.png" alt="" />
<!-- 背景图 -->
<div class="pc1-advert">
<img :src="product[i].advert.img" alt="" />
</div>
<div class="product-merit">
<h5>核心要素</h5>
<h6>Core advantage</h6>
<product-functions3
:list="product.functions.list"
v-if="product.functions.style == false"
/>
<product-functions2
:list="product.functions.list"
v-if="product.functions.style == true"
/>
<!-- 核心要素 -->
<div class="pc1-core">
<div class=" instructions">
<h4>核心要素</h4>
<p>CORE ELEMENTS</p>
</div>
<div class="pc1-core-border">
<div
class="pc1-core-box card1"
v-for="(item, index) in product[i].core"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
</div>
<div class="ydwt">
<img class="ydwt-img" src="/image/catia/0305.png" alt="">
<h5>应对问题</h5>
<h6>Coping with problems</h6>
<div class="ydwt-all">
<div v-for="(item,index) in product.ydwtlist" :key="index">
<img :src="item.url" alt="">
<p>{{item.p}}</p>
<!-- 应对问题 -->
<div class="pc1-problems">
<div class="instructions">
<h4>应对问题</h4>
<p>COPING WITH PROBLEMS</p>
</div>
<div class="pc1-problems-border">
<img :src="product[i].problems.url" width="100%" alt="" />
<div class="pc1-problems-module">
<div
class="pc1-problems-box "
v-for="(item, index) in product[i].problems.catia"
:key="index"
>
<img :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
</div>
</div>
</div>
</div>
</div>
<div class="product-merit" style="background-color: rgb(239, 246, 255);">
<div class="pd"></div>
<h5>功能模块</h5>
<h6>function modul</h6>
<product-functions2 :list="product.functions2.list" v-if="product.functions2.style==true"/>
<product-functions3 :list="product.functions2.list" v-if="product.functions2.style==false"/>
</div>
<div class="product-merit">
<h5>应用场景</h5>
<h6>Adaptation scenarios</h6>
<div style="display: flex;width: 1200px;flex-wrap:wrap;margin-top:47px;
height:700px" class="gnmb">
<div class="gnmb-border" v-for="(item,index) in product.gnmb" :key="index">
<img class="img1" :src="item.url" alt="">
<div>{{item.title}}</div>
<!-- 功能模块 -->
<div class="pc1-function">
<div class="instructions">
<h4>功能模块</h4>
<p>FUNCTION MODUL</p>
</div>
<div class="pc1-function-border">
<div
class="pc1-function-box card1"
v-for="(item, index) in product[i].function"
:key="index"
>
<img width="50px" height="50px" :src="item.url" alt="" />
<h4>{{ item.title }}</h4>
<div>{{ item.content }}</div>
</div>
</div>
</div>
<!-- 应用场景 -->
<div class="pc1-scene">
<div class="instructions">
<h4>应用场景</h4>
<p>ADAPTATION SCENARIOS</p>
</div>
<div class="pc1-scene-lication">
<div class="pc1-scene-lt">
<div class="pc1-scene-back1 pl">
<img width="720px" height="400px" :src="product[i].icon.catia.url1" alt="" />
<div><span>{{product[i].icon.catia.title1}}</span></div>
</div>
<div class="pc1-scene-back2 pl">
<img width="650px" height="400px" :src="product[i].icon.catia.url2" alt="" />
<div><span>{{product[i].icon.catia.title2}}</span></div>
</div>
</div>
<div class="pc1-scene-lb">
<div class="pc1-scene-tail1">
<img width="600px" height="400px" :src="product[i].icon.catia.url3" alt="" />
<div><span>{{product[i].icon.catia.title3}}</span></div>
</div>
<div class="pc1-scene-tail2">
<img width="770px" height="400px" :src="product[i].icon.catia.url4" alt="" />
<div><span>{{product[i].icon.catia.title4}}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -90,305 +125,515 @@
export default {
name: "",
head: {
title: "SaaS MES云端协同---北京见著科技有限公司--MES系统"
title: "德天博城3DEXPE"
},
components: {},
data() {
return {
pointIndex: 0,
product: {
banner: "/image/phm/sm.png",
bannerphone: "/image/phm/smp.jpg",
title: "基于数字化模型的产品设计",
jj1: "CATIA依托3DE平台结合VR虚拟现实技术重新定义产品开发，借助虚拟世界先进行仿真评估。",
jj2:
"是PLM协同解决方案的一个重要组成部分，支持从项目前阶段、具体的设计、分析、模拟、组装到维护在内的全部工业设计流程。而后借助PLM系统将创意付诸于现实。",
url: "/image/phm/t527.png",
f1: true,
f2: true,
spcj: {
title:
"PHM适用于是密集应用大数据的典型工业领域，是工业互联网的重要组成部分。PHM强调资产设备管理中的状态感知、数据监控与分析，通过监控设备健康状况、故障频发区域与周期，预测故障的发生，从而大幅度提高运维效率。",
url: [
"/image/catia/0307.png",
"/image/catia/0308.png",
"/image/catia/0309.png",
"/image/catia/0310.png",
i: 1,
duct: {},
product: [
{
flag: 0,
top: "3D体验平台",
url1: "/image/expe/0202.png",
url2: "/image/expe/0203.png",
title: "高端可视化3D软件",
//产品简介
product: {
p1: "从虚拟的3DEXPERIENCE孪生兄弟到惊人的营销内容。",
p2:
"3D体验平台（3DEXPERIENCE Platform）是达索最新一代的软件平台,集合了3D 设计、工程、3D CAD、建模、仿真、数据管理和流程管理功能的众多的品牌应程序"
},
// 背景图
advert: {
img: ""
},
//核心要素
core: [
{
url: "/image/aps/tc172.png",
title: "3D建模应用程序",
content: "CATIA、SolidWorks、GEOVIA、BIOVIA四个品牌"
},
{
url: "/image/aps/tc173.png",
title: "社交和协作应用程序",
content: "ENOVIA、3DEXCITE、3DSWYM三个品牌应用"
},
{
url: "/image/aps/tc174.png",
title: "仿真应用程序",
content: "DELMIA、SIMULIA、3DVIA三个品牌应用"
},
{
url: "/image/aps/tc187.png",
title: "信息智能应用",
content: "EXLEAD、NETVIBES两个品牌应用"
}
],
//功能模块
function: [
{
url: "/image/aps/tc188.png",
title: "一个模型掌握一切",
content:
"3DEXCITE利用CAD数据中的信息来支持功能完善的主模型,优化CAD以生产出营销内容的所有变体"
},
{
url: "/image/big/tc1.png",
title: "经销权体验",
content:
"我们的独特风格 3D 解决方案，促成吸引人的品牌和产品互动，最终展现出产品最好的一面"
},
{
url: "/image/big/tc5.png",
title: "移动设备和网页3D可视化",
content:
"完全交互式3D模型允许360度产品旋转及内外零部件的配置，,在线或移动设备上的3D配置器中组织和呈现的产品为终端用户提供了出色的体验"
},
{
url: "/image/big/tc3.png",
title: "移动设备和网页3D 可视化",
content:
"虚拟孪生体验是基于数学模型和科学定律的对现实世界的表示，实现了虚拟和现实世界之间的闭环连接。利益相关者通过探索所有可能性和场景，不断实验、获取知识并对其进行优化。"
},
{
url: "/image/big/tc4.png",
title: "VR MR AR 附件",
content:
"用 3DEXCITE 个人宣传活动在客户之旅的所有阶段和所有接触点触及目标受众。通过全功能的销售点配置器来获得客户喜好，用于后续发送带有微站宣传册等的个性化邮件，营造了引人入胜的商店体验"
}
]
},
functions: {
style: false,
list: [
{
flag: 1,
top: "基于数字化模型的产品设计",
url1: "/image/catia/03336.png",
url2: "/image/catia/0302.png",
title: "3D CAD设计和工程软件",
//产品简介
product: {
p1:
"CATIA依托3DE平台结合VR虚拟现实技术重新定义产品开发，借助虚拟世界先进行仿真评估",
p2:
"是PLM协同解决方案的一个重要组成部分，支持从项目前阶段、具体的设计、分析、模拟、组装到维护在内的全部工业设计流程。从而借助PLM系统姜创意付诸于现实"
},
// 背景图
advert: {
img: "/image/catia/03334.png" //汽车
},
//核心要素
core: [
{
url: "/image/catia/0206.png",
url: "/image/catia/0305.png",
title: "变量和参数化建模",
content: ["CATIA具有在整个产品周期内提供了变量驱动及后参数化能力"]
content: "CATIA具有在整个产品周期内提供了变量驱动及后参数化能力。"
},
{
url: "/image/catia/0207.png",
url: "/image/catia/0306.png",
title: "模块的全相关性",
content: ["CATIA的各个模块基于统一的数据平台，三维模型的修改，能完全体现 在二维模型，模拟分析，模具和数控加工的程序中"]
content:
"CATIA的各个模块基于统一的数据平台，三维模型的修改，能完全体现 在二维模型，模拟分析，模具和数控加工的程序中"
},
{
url: "/image/catia/0208.png",
url: "/image/catia/0307.png",
title: "并行工程的设计环境",
content: ["总体设计部门将基本的结构尺寸发放出去，各分系统的人员便可开始工作，既可协同工作，又不互相牵连。实现真正的并行工程设计环境"]
content:
"总体设计部门将基本的结构尺寸发放出去，各分系统的人员便可开始工作，既可协同工作，又不互相牵连。实现真正的并行工程设计环境"
},
{
url: "/image/catia/0209.png",
url: "/image/catia/0308.png",
title: "覆盖产品开发全过程",
content: ["从单个零件的设计到最终电子样机的建立,CATIA 提供了完备的设计能力."]
},
]
},
functions2: {
style: true,
list: [
{url:"/image/phm/tc7.png",
title:"零件设计",
content:["在直观的环境下，用高效强大的造型特征设计复杂零"],
},{
url:"/image/phm/tc7.png",
title:"钣金与创成式曲面",
content:["非常完整的曲线操作工具和最基础的曲面构造工具"],
},
{url:"/image/phm/tc7.png",
title:"装配设计",
content:["高效率的工具如、碰撞和间隙检查、自动BOM表生成等可减少了设计时间、提高了装配质量"],
},{
url:"/image/phm/tc7.png",
title:"模具设计",
content:["模具设计产品允许快速、经济地创建注塑模具，可以使用标准目录库中已经预定义好的组件"],
content:
"从单个零件的设计到最终电子样机的建立,CATIA 提供了完备的设计能力"
}
],
// 应对问题
problems: {
url: "/image/catia/03335.png",
catia: [
{
url: "/image/catia/0331.png",
title: "设计与制造间的信息交互"
},
{
url: "/image/catia/0332.png",
title: "依据数模完善工艺路线"
},
{
url: "/image/catia/0333.png",
title: "形成数字样机"
},
{
url: "/image/catia/0334.png",
title: "实现产品实物的模型渲染"
}
]
},
{url:"/image/phm/tc7.png",
title:"电气系统设计",
content:["可实现电气零件的设计装配、功能定义，电气线束的装配、生成和展平等内容"],
},
// {
// url: "/image/phm/tc12.png",
// title: "参数管理",
// content: [
// "展示故障发生时间段的故障参数及参数曲线，提供参数历史数据订阅查询，提供参数库管理。"
// ]
// },
// {
// url: "/image/phm/tc13.png",
// title: "模型库",
// content: [
// "对设备进行管理和维护，根据不同用户设置权限限制，按建设模型的不同阶段展示不同的模型相关属性，并提供新建模型、升级版本、模型重用和展示模型效果等功能。"
// ]
// },
// {
// url: "/image/phm/tc14.png",
// title: "预警信息管理",
// content: [
// "展示所有实时预警信息和预警相关的统计图表，提供多维度的查询和导出功能,支持查看预警的相关实时参数和参数曲线，支持预警信息自动发送以及初步判断。"
// ]
// },
// {
// url: "/image/phm/tc15.png",
// title: "健康管理",
// content: [
// "根据既定规则对设备进行健康度评测，动态监控车辆的运行状态和健康状态，为潜在维修问题的发现和诊断，突发故障的高效处理，以及决策提供数据依据，从而提高维保效率和质量，保障设备更加安全可靠地运行。"
// ]
// }
]
},
functions3: [
{
url: "/image/phm/tc20.png",
title: "故障提前预知",
content: ["预知故障时间和位置，提高运行可靠性 "]
},
{
url: "/image/phm/tc21.png",
title: "提高可用时长",
content: ["提高可用时长，预测剩余使用寿命 "]
},
{
url: "/image/phm/tc22.png",
title: "提高维修准确性",
content: ["提高维修准确性，降低维修成本 "]
},
{
url: "/image/phm/tc23.png",
title: "运维决策优化",
content: ["辅助运维决策优化，提高运维价值"]
//功能模块
function: [
{
url: "/image/catia/0311.png",
title: "零件设计",
content: "在直观的环境下，用高效强大的造型特征设计复杂零件"
},
{
url: "/image/catia/0312.png",
title: "钣金与创成式曲面",
content: "非常完整的曲线操作工具和最基础的曲线构造工具"
},
{
url: "/image/catia/0313.png",
title: "装配设计",
content:
"高效率的工具如、碰撞和间隙检查、自动BOM表生成等可减少设计时间、提高了装配质量"
},
{
url: "/image/catia/0314.png",
title: "模具设计",
content:
"模具设计产品允许快速、经济地创建注塑模具，可以使用标准目录库中已经预定义好的组件"
},
{
url: "/image/catia/0315.png",
title: "电气系统设计",
content:
"可实现电器零件的设计装配、功能定义，电气线束的装配、生成和展平等内容"
}
],
icon: {
url: "",
catia:{
url1:"/image/catia/03330.png",
title1:"航空航天与国防",
url2:"/image/catia/03331.png",
title2:"工业设备",
url3:"/image/catia/03332.png",
title3:"建筑工程与施工",
url4:"/image/catia/03333.png",
title4:"汽车与交通运输",
}
}
],
ydwtlist: [
{ url: "/image/phm/tc7.png", p: "设计与制造间的信息交互" },
{
url: "/image/phm/tc8.png",
p: "依据数模完善工艺路线"
},
{
url: "/image/phm/tc9.png",
p: "形成数字样机"
},
{
url: "/image/phm/tc10.png",
p: "实现产品实物的模型渲染"
},
],
gnmb:[
{url:"/image/catia/0307.png",
title:"零件设计",
content:"在直观的环境下，用高效强大的造型特征设计复杂零件",
},{
url:"/image/catia/0308.png",
title:"钣金与创成式曲面",
content:"非常完整的曲线操作工具和最基础的曲面构造工具",
},
{url:"/image/catia/0309.png",
title:"装配设计",
content:"高效率的工具如、碰撞和间隙检查、自动BOM表生成等可减少了设计时间、提高了装配质量",
},{
url:"/image/catia/0310.png",
title:"模具设计",
content:"模具设计产品允许快速、经济地创建注塑模具，可以使用标准目录库中已经预定义好的组件",
},
]
}
}
]
};
},
methods: {
hover(i) {
this.pointIndex = i;
},
watch() {}
methods: {},
mounted() {
// 数据筛选
this.product.forEach((item, index) => {
if (item.flag == this.i) {
return this.i;
}
});
this.duct = this.product[this.i];
}
};
</script>
<style lang="less" scoped>
.propduct-back {
width: 100%;
height: 100%;
min-height: 800px;
display: flex;
justify-content: space-between;
.propduct-background1 {
flex: 0.6;
.img1{
width: 100%;
// 头部指示
.instructions {
border-left: 10px solid #294982;
height: 60px;
padding-left: 15px;
h4 {
line-height: 60px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
p {
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 0px;
color: #294982;
opacity: 0.2;
position: relative;
top: -10px;
}
}
.mt {
margin-bottom: 90px;
}
.pc1 {
width: 1400px;
height: auto;
border: 0px solid #f89;
margin: 100px auto 0px;
.pc1-top {
//顶部图片标题
display: flex;
.pc1-left {
width: 781px;
height: 474px;
margin-right: 103px;
}
.pc1-right {
width: 480px;
height: 474px;
img {
margin-top: 65px;
height: 172px;
}
div {
text-align: center;
padding-top: 75px;
height: 47px;
font-size: 30px;
font-family: Alibaba Sans;
font-weight: 900;
color: #232323;
opacity: 1;
}
}
}
.propduct-background2 {
flex: 0.4;
.pc1-head {
//标题导语
display: flex;
flex-direction: column;
text-align: center;
justify-content: space-between;
align-items: center;
.pc1-head-left {
width: 480px;
height: 2px;
background: linear-gradient(
297deg,
#201da3 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
border-radius: 0px;
}
h4 {
font-size: 30px;
margin-top:10% ;
line-height: 30px;
font-size: 34px;
}
img{
width: 100%;
margin-top: 20%;
.pc1-head-right {
width: 480px;
height: 2px;
background: linear-gradient(
63deg,
#201da3 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
border-radius: 0px;
}
}
}
.pd {
position: absolute;
width: 100%;
}
.pd1 {
display: flex;
flex-direction: column;
align-items: center;
width: 1200px;
}
.cj {
margin-top: 0.3rem;
img {
.pc1-product {
//产品简介
margin-top: 3.75rem;
margin-bottom: 3.75rem;
.pc1-pr-content {
margin-top: 40px;
padding-left: 30px;
}
}
.pc1-advert {
//背景图
width: 100%;
margin-bottom: 80px;
}
}
.foot {
width: 115%;
}
.advertisement{
width: 100%;
text-align: center;
.advertisementci{
display: inline-block;
font-size:32px ;
font-weight: bold;
color: #000;
position: relative;
top: -300px;
left: 30%;
line-height: 50px;
.pc1-core {
//核心要素
margin-bottom: 20px;
.pc1-core-border {
// height: 420px;
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
align-items: center;
.pc1-core-box {
width: 220px;
height: 300px;
border-radius: 8px;
}
}
}
}
.gnmb{
width: 60%;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
.gnmb-all{
width: 30%;
padding: 20px 10px;
// 应对问题
.pc1-problems {
.pc1-problems-border {
// height: 500px;
position: relative;
margin-top: 60px;
margin-bottom: 80px;
img {
opacity: .2;
}
.pc1-problems-module {
position: absolute;
top: 0;
left: 0;
width: 1400px;
height: 100%;
display: flex;
justify-content: space-evenly;
.pc1-problems-box {
width: 100px;
z-index: 1;
text-align: center;
img{
margin-top: 190px;
width: 50px;
height: 50px;
}
h4{
margin-top: 25px;
line-height: 21px;
font-size: 16px;
color: #000;
}
}
}
}
}
.pc1-function {
//功能模块
margin-bottom: 20px;
background: #fff;
text-align: center;
.pc1-function-border {
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
height: 420px;
align-items: center;
.pc1-function-box {
width: 220px;
height: 300px;
border-radius: 8px;
}
}
}
}
.beijing{
align-items:center;
div{
flex-direction:row-reverse;
img:nth-child(3n){
//应用场景
.pc1-scene {
//应用场景
padding-bottom: 20px;
.pc1-scene-lication {
height: 800px;
width: 100%;
margin: 60px auto;
.pc1-scene-lt{
margin-bottom: 30px;
display: flex;
justify-content: space-between;
.pc1-scene-back1{
width: 720px;
position: relative;
bottom: 146px;
opacity: .6;
width: 568px;
}
img:nth-child(3n-2){
width: 568px;
height: 320px;
div{
position: absolute;
width: 720px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
p{
width: 568px;
text-align: center;
line-height: 72px;
height: 72px;
.pc1-scene-back2{
width: 650px;
height: 400px;
position: relative;
bottom: 72px;
font-size: 20px;
font-weight: bold;
color: #fff;
div{
position: absolute;
width: 650px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
}
}
.gnmb{
display: flex;
justify-content: space-between;
.gnmb-border{
width: 500px;
.img1{
width: 500px;
height: 300px;
}
.pc1-scene-lb{
display: flex;
justify-content: space-between;
.pc1-scene-tail1{
width: 600px;
height: 400px;
position: relative;
div{
position: absolute;
width: 600px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
div{
width: 500px;
height: 50px;
background: url(/image/enovia/0511.png);
line-height: 50px;
.pc1-scene-tail2{
width: 770px;
height: 400px;
position: relative;
div{
position: absolute;
width: 770px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center;
position: relative;
bottom: 57px;
opacity: .8;
font-weight: bold;
color: #fff;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
}
}
}
}
}
// 卡片布局
.card1 {
box-shadow: 0px 0px 10px 0px rgb(196, 195, 195);
img {
margin: 30px 85px;
text-align: center;
}
h4 {
font-size: 20px;
text-align: center;
height: 69px;
padding: 0px 20px;
color: #2c4b84;
}
div {
width: 100%;
padding: 0px 20px;
line-height: 15px;
color: #454545;
}
}
.card1:hover{
box-shadow: 0px 0px 20px 5px #c3c2c5;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment