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> <template>
<div> <div>
<div class="pc"> <div class="pc1">
<div class="product-introduce"> <div class="pc1-top mt">
<div class="propduct-back"> <div class="pc1-left">
<div class="propduct-background1"> <img :src="product[i].url1" width="100%" height="100%" alt="" />
<img class="img1" src="/image/catia/0301.png" alt="" /> </div>
</div> <div class="pc1-right">
<div class="propduct-background2"> <img :src="product[i].url2" width="100%" height="50%" alt="" />
<img src="/image/catia/0302.png" alt="" /> <div>
<h4>3D CAD设计和工程软</h4> {{ product[i].title }}
</div> </div>
</div> </div>
<div class="title"> </div>
<div class="line"></div> <div class="pc1-head">
<p>{{ product.title }}</p> <div class="pc1-head-left"></div>
<div class="line"></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> </div>
<h5>产品简介</h5> <div class="pc1-pr-content">
<h6>Product introduction</h6> <p>{{ product[i].product.p1 }}</p>
<span <p>{{ product[i].product.p2 }}</p>
>&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> </div>
</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>
<div class="product-merit"> <!-- 核心要素 -->
<h5>核心要素</h5> <div class="pc1-core">
<h6>Core advantage</h6> <div class=" instructions">
<product-functions3 <h4>核心要素</h4>
:list="product.functions.list" <p>CORE ELEMENTS</p>
v-if="product.functions.style == false" </div>
/> <div class="pc1-core-border">
<product-functions2 <div
:list="product.functions.list" class="pc1-core-box card1"
v-if="product.functions.style == true" 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>
<div class="ydwt"> <!-- 应对问题 -->
<img class="ydwt-img" src="/image/catia/0305.png" alt=""> <div class="pc1-problems">
<h5>应对问题</h5> <div class="instructions">
<h6>Coping with problems</h6> <h4>应对问题</h4>
<div class="ydwt-all"> <p>COPING WITH PROBLEMS</p>
<div v-for="(item,index) in product.ydwtlist" :key="index"> </div>
<img :src="item.url" alt=""> <div class="pc1-problems-border">
<p>{{item.p}}</p> <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>
</div> <!-- 功能模块 -->
<div class="product-merit" style="background-color: rgb(239, 246, 255);"> <div class="pc1-function">
<div class="pd"></div> <div class="instructions">
<h5>功能模块</h5> <h4>功能模块</h4>
<h6>function modul</h6> <p>FUNCTION MODUL</p>
<product-functions2 :list="product.functions2.list" v-if="product.functions2.style==true"/> </div>
<product-functions3 :list="product.functions2.list" v-if="product.functions2.style==false"/> <div class="pc1-function-border">
<div
</div> class="pc1-function-box card1"
v-for="(item, index) in product[i].function"
:key="index"
<div class="product-merit"> >
<h5>应用场景</h5> <img width="50px" height="50px" :src="item.url" alt="" />
<h6>Adaptation scenarios</h6> <h4>{{ item.title }}</h4>
<div style="display: flex;width: 1200px;flex-wrap:wrap;margin-top:47px; <div>{{ item.content }}</div>
height:700px" class="gnmb"> </div>
<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> </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> </div>
</div> </div>
</template> </template>
...@@ -90,305 +125,515 @@ ...@@ -90,305 +125,515 @@
export default { export default {
name: "", name: "",
head: { head: {
title: "SaaS MES云端协同---北京见著科技有限公司--MES系统" title: "德天博城3DEXPE"
}, },
components: {},
data() { data() {
return { return {
pointIndex: 0, i: 1,
product: { duct: {},
banner: "/image/phm/sm.png", product: [
bannerphone: "/image/phm/smp.jpg", {
title: "基于数字化模型的产品设计", flag: 0,
jj1: "CATIA依托3DE平台结合VR虚拟现实技术重新定义产品开发，借助虚拟世界先进行仿真评估。", top: "3D体验平台",
jj2: url1: "/image/expe/0202.png",
"是PLM协同解决方案的一个重要组成部分，支持从项目前阶段、具体的设计、分析、模拟、组装到维护在内的全部工业设计流程。而后借助PLM系统将创意付诸于现实。", url2: "/image/expe/0203.png",
url: "/image/phm/t527.png", title: "高端可视化3D软件",
f1: true, //产品简介
f2: true, product: {
spcj: { p1: "从虚拟的3DEXPERIENCE孪生兄弟到惊人的营销内容。",
title: p2:
"PHM适用于是密集应用大数据的典型工业领域，是工业互联网的重要组成部分。PHM强调资产设备管理中的状态感知、数据监控与分析，通过监控设备健康状况、故障频发区域与周期，预测故障的发生，从而大幅度提高运维效率。", "3D体验平台（3DEXPERIENCE Platform）是达索最新一代的软件平台,集合了3D 设计、工程、3D CAD、建模、仿真、数据管理和流程管理功能的众多的品牌应程序"
url: [ },
"/image/catia/0307.png", // 背景图
"/image/catia/0308.png", advert: {
"/image/catia/0309.png", img: ""
"/image/catia/0310.png", },
//核心要素
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, flag: 1,
list: [ 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: "变量和参数化建模", title: "变量和参数化建模",
content: ["CATIA具有在整个产品周期内提供了变量驱动及后参数化能力"] content: "CATIA具有在整个产品周期内提供了变量驱动及后参数化能力。"
}, },
{ {
url: "/image/catia/0207.png", url: "/image/catia/0306.png",
title: "模块的全相关性", title: "模块的全相关性",
content: ["CATIA的各个模块基于统一的数据平台，三维模型的修改，能完全体现 在二维模型，模拟分析，模具和数控加工的程序中"] content:
"CATIA的各个模块基于统一的数据平台，三维模型的修改，能完全体现 在二维模型，模拟分析，模具和数控加工的程序中"
}, },
{ {
url: "/image/catia/0208.png", url: "/image/catia/0307.png",
title: "并行工程的设计环境", title: "并行工程的设计环境",
content: ["总体设计部门将基本的结构尺寸发放出去，各分系统的人员便可开始工作，既可协同工作，又不互相牵连。实现真正的并行工程设计环境"] content:
"总体设计部门将基本的结构尺寸发放出去，各分系统的人员便可开始工作，既可协同工作，又不互相牵连。实现真正的并行工程设计环境"
}, },
{ {
url: "/image/catia/0209.png", url: "/image/catia/0308.png",
title: "覆盖产品开发全过程", title: "覆盖产品开发全过程",
content: ["从单个零件的设计到最终电子样机的建立,CATIA 提供了完备的设计能力."] content:
}, "从单个零件的设计到最终电子样机的建立,CATIA 提供了完备的设计能力"
}
] ],
}, // 应对问题
functions2: { problems: {
style: true, url: "/image/catia/03335.png",
list: [ catia: [
{url:"/image/phm/tc7.png", {
title:"零件设计", url: "/image/catia/0331.png",
content:["在直观的环境下，用高效强大的造型特征设计复杂零"], title: "设计与制造间的信息交互"
},{ },
url:"/image/phm/tc7.png", {
title:"钣金与创成式曲面", url: "/image/catia/0332.png",
content:["非常完整的曲线操作工具和最基础的曲面构造工具"], title: "依据数模完善工艺路线"
}, },
{url:"/image/phm/tc7.png", {
title:"装配设计", url: "/image/catia/0333.png",
content:["高效率的工具如、碰撞和间隙检查、自动BOM表生成等可减少了设计时间、提高了装配质量"], title: "形成数字样机"
},{ },
url:"/image/phm/tc7.png", {
title:"模具设计", url: "/image/catia/0334.png",
content:["模具设计产品允许快速、经济地创建注塑模具，可以使用标准目录库中已经预定义好的组件"], title: "实现产品实物的模型渲染"
}
]
}, },
{url:"/image/phm/tc7.png",
title:"电气系统设计", //功能模块
content:["可实现电气零件的设计装配、功能定义，电气线束的装配、生成和展平等内容"], function: [
}, {
// { url: "/image/catia/0311.png",
// url: "/image/phm/tc12.png", title: "零件设计",
// title: "参数管理", content: "在直观的环境下，用高效强大的造型特征设计复杂零件"
// content: [ },
// "展示故障发生时间段的故障参数及参数曲线，提供参数历史数据订阅查询，提供参数库管理。" {
// ] url: "/image/catia/0312.png",
// }, title: "钣金与创成式曲面",
// { content: "非常完整的曲线操作工具和最基础的曲线构造工具"
// url: "/image/phm/tc13.png", },
// title: "模型库", {
// content: [ url: "/image/catia/0313.png",
// "对设备进行管理和维护，根据不同用户设置权限限制，按建设模型的不同阶段展示不同的模型相关属性，并提供新建模型、升级版本、模型重用和展示模型效果等功能。" title: "装配设计",
// ] content:
// }, "高效率的工具如、碰撞和间隙检查、自动BOM表生成等可减少设计时间、提高了装配质量"
// { },
// url: "/image/phm/tc14.png", {
// title: "预警信息管理", url: "/image/catia/0314.png",
// content: [ title: "模具设计",
// "展示所有实时预警信息和预警相关的统计图表，提供多维度的查询和导出功能,支持查看预警的相关实时参数和参数曲线，支持预警信息自动发送以及初步判断。" content:
// ] "模具设计产品允许快速、经济地创建注塑模具，可以使用标准目录库中已经预定义好的组件"
// }, },
// { {
// url: "/image/phm/tc15.png", url: "/image/catia/0315.png",
// title: "健康管理", title: "电气系统设计",
// content: [ content:
// "根据既定规则对设备进行健康度评测，动态监控车辆的运行状态和健康状态，为潜在维修问题的发现和诊断，突发故障的高效处理，以及决策提供数据依据，从而提高维保效率和质量，保障设备更加安全可靠地运行。" "可实现电器零件的设计装配、功能定义，电气线束的装配、生成和展平等内容"
// ] }
// } ],
] icon: {
}, url: "",
functions3: [ catia:{
{ url1:"/image/catia/03330.png",
url: "/image/phm/tc20.png", title1:"航空航天与国防",
title: "故障提前预知", url2:"/image/catia/03331.png",
content: ["预知故障时间和位置，提高运行可靠性 "] title2:"工业设备",
}, url3:"/image/catia/03332.png",
{ title3:"建筑工程与施工",
url: "/image/phm/tc21.png", url4:"/image/catia/03333.png",
title: "提高可用时长", title4:"汽车与交通运输",
content: ["提高可用时长，预测剩余使用寿命 "] }
},
{
url: "/image/phm/tc22.png",
title: "提高维修准确性",
content: ["提高维修准确性，降低维修成本 "]
},
{
url: "/image/phm/tc23.png",
title: "运维决策优化",
content: ["辅助运维决策优化，提高运维价值"]
} }
], }
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: { methods: {},
hover(i) { mounted() {
this.pointIndex = i; // 数据筛选
}, this.product.forEach((item, index) => {
watch() {} if (item.flag == this.i) {
return this.i;
}
});
this.duct = this.product[this.i];
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.propduct-back { // 头部指示
width: 100%; .instructions {
height: 100%; border-left: 10px solid #294982;
min-height: 800px; height: 60px;
display: flex; padding-left: 15px;
justify-content: space-between; h4 {
.propduct-background1 { line-height: 60px;
flex: 0.6; font-size: 30px;
.img1{ font-family: Alibaba Sans;
width: 100%; 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 { .pc1-head {
flex: 0.4; //标题导语
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
text-align: center; 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 { h4 {
font-size: 30px; font-size: 34px;
margin-top:10% ;
line-height: 30px;
} }
img{ .pc1-head-right {
width: 100%; width: 480px;
margin-top: 20%; height: 2px;
background: linear-gradient(
63deg,
#201da3 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
border-radius: 0px;
} }
} }
} .pc1-product {
.pd { //产品简介
position: absolute; margin-top: 3.75rem;
width: 100%; margin-bottom: 3.75rem;
} .pc1-pr-content {
.pd1 { margin-top: 40px;
display: flex; padding-left: 30px;
flex-direction: column; }
align-items: center; }
width: 1200px; .pc1-advert {
} //背景图
.cj {
margin-top: 0.3rem;
img {
width: 100%; width: 100%;
margin-bottom: 80px;
} }
} .pc1-core {
.foot { //核心要素
width: 115%; margin-bottom: 20px;
} .pc1-core-border {
.advertisement{ // height: 420px;
width: 100%; padding-left: 80px;
text-align: center; padding-right: 80px;
display: flex;
.advertisementci{ justify-content: space-between;
display: inline-block; align-items: center;
font-size:32px ; .pc1-core-box {
font-weight: bold; width: 220px;
color: #000; height: 300px;
position: relative; border-radius: 8px;
top: -300px; }
left: 30%; }
line-height: 50px;
} }
} // 应对问题
.pc1-problems {
.gnmb{ .pc1-problems-border {
width: 60%; // height: 500px;
text-align: center; position: relative;
display: flex; margin-top: 60px;
flex-wrap: wrap; margin-bottom: 80px;
justify-content: center; img {
.gnmb-all{ opacity: .2;
width: 30%; }
padding: 20px 10px; .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; margin-bottom: 20px;
background: #fff; .pc1-function-border {
text-align: center; 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{ .pc1-scene {
align-items:center; //应用场景
div{ padding-bottom: 20px;
flex-direction:row-reverse; .pc1-scene-lication {
img:nth-child(3n){ 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; position: relative;
bottom: 146px; div{
opacity: .6; position: absolute;
width: 568px; width: 720px;
} height: 45px;
img:nth-child(3n-2){ background: rgba(41, 73, 130, 0.5);
width: 568px; bottom: 0;
height: 320px; text-align: center;
line-height: 45px;
span{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
opacity: 1;
}
}
} }
p{ .pc1-scene-back2{
width: 568px; width: 650px;
text-align: center; height: 400px;
line-height: 72px;
height: 72px;
position: relative; position: relative;
bottom: 72px; div{
font-size: 20px; position: absolute;
font-weight: bold; width: 650px;
color: #fff; 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{ .pc1-scene-lb{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.gnmb-border{ .pc1-scene-tail1{
width: 500px; width: 600px;
.img1{ height: 400px;
width: 500px; position: relative;
height: 300px; 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{ .pc1-scene-tail2{
width: 500px; width: 770px;
height: 50px; height: 400px;
background: url(/image/enovia/0511.png); position: relative;
line-height: 50px; div{
position: absolute;
width: 770px;
height: 45px;
background: rgba(41, 73, 130, 0.5);
bottom: 0;
text-align: center; text-align: center;
position: relative; line-height: 45px;
bottom: 57px; span{
opacity: .8; font-size: 14px;
font-weight: bold; font-family: Microsoft YaHei;
color: #fff; 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> </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