效果图
说明
这个首页我也是构思了很久，才想出这个界面，大家喜欢的话，可以拿走去使用
技术的话，采用的就是vue的语法，但是不影响，很多样式我都是直接手敲出来的
代码实现 标语
Do something you love.
"Success is not final, failure is not fatal: it is the courage to continue that counts."
.text { padding-top: 300px; text-align: center; height: 600px; p { color: #dbedf2; font-size: 28px; margin-bottom: 20px; span { font-size: 50px; color: white; } } }
卡片
{{ cardList[0].title }}
{{ cardList[0].content }}
{{ cardList[1].title }}
{{ cardList[1].content }}
{{ cardList[2].title }}
{{ cardList[2].content }}
.card { .tilt { background-color: #fff; height: 750px; transform: skewY(-1.5deg); } .card-list { margin-left: 10%; position: absolute; z-index: 9; margin-top: -100px; display: flex; .card-item { background-color: #fff; height: 400px; width: 400px; box-shadow: 7px 14px 42px 3px rgb(163 174 184 / 40%); .card-icon { margin-top: 40px; margin-left: 41%; color: #52d3aa; } p { text-align: center; line-height: 30px; font-size: 17px; margin-top: 20px; margin-left: 10%; margin-right: 10%; span { font-size: 28px; } } button { margin-top: 20px; margin-left: 30%; width: 40%; border-radius: 5px; background: #52d3aa; color: #fff; border: none !important; border: 10px solid transparent !important; text-transform: uppercase; letter-spacing: 2px; } button:hover { cursor: pointer; background: #fff; color: #52d3aa; } } .card-item:hover { background-image: url("@/assets/image/背景图片/img_7.jpg"); background-size: cover; color: #fff; .card-icon { color: #fff !important; } } } .video { position: absolute; z-index: 9; margin-top: -340px; margin-left: 38%; p { font-size: 24px; font-weight: bolder; color: #7f7f7f; } .video-icon { margin-top: 30px; margin-left: 40px; font-size: 150px; color: #52d3aa; } .video-icon:hover { cursor: pointer; font-size: 153px; } } } 图片墙
图片墙
图片墙记录着我们团队的欢笑、汗水和努力。在这里，你可以看到我们团队成员充满激情地合作、创新和研发出优秀的产品。这些照片展示了多元化的团队文化，我们鼓励员工发挥创造力，分享彼此的成功和成长。
{{ item.bannerData1 }}
{{ item.bannerData2 }}
.work { margin-top: 100px; margin-bottom: 300px; .work-title { text-align: center; margin-left: 25%; margin-right: 25%; p { color: #daedf7; font-size: 25px; line-height: 50px; span { color: #ffffff; font-size: 50px; } } hr { margin-top: 30px; margin-bottom: 30px; width: 4%; } } .picture-list { margin-top: 100px; margin-left: 10%; width: 100%; display: flex; flex-wrap: wrap; //自动换行 .picture-item { border-radius: 8px; background-color: #fff; height: 370px; width: 370px; margin: 20px; .image { border-radius: 8px 8px 0 0; height: 300px; width: 100%; } p { text-align: center; line-height: 30px; color: #b3b3b3; font-size: 16px; span { font-weight: bolder; color: #000000; } span:hover { color: #57d4ac; } } } .picture-item:hover { box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); margin-top: -1px; cursor: pointer; } } } 理念
理念
我们的理念是通过技术与人文的结合，解决现实生活中的问题，推动社会的进步和发展。
我们相信，现代互联网技术可以拓展人类的视野，打破地域的限制，让人们更加便捷地获取信息、交流和合作。通过创新，我们为客户提供前瞻性的产品和服务，帮助他们在激烈的市场竞争中脱颖而出。
.work { margin-top: 100px; margin-bottom: 300px; .work-title { text-align: center; margin-left: 25%; margin-right: 25%; p { color: #daedf7; font-size: 25px; line-height: 50px; span { color: #ffffff; font-size: 50px; } } hr { margin-top: 30px; margin-bottom: 30px; width: 4%; } } .picture-list { margin-top: 100px; margin-left: 10%; width: 100%; display: flex; flex-wrap: wrap; //自动换行 .picture-item { border-radius: 8px; background-color: #fff; height: 370px; width: 370px; margin: 20px; .image { border-radius: 8px 8px 0 0; height: 300px; width: 100%; } p { text-align: center; line-height: 30px; color: #b3b3b3; font-size: 16px; span { font-weight: bolder; color: #000000; } span:hover { color: #57d4ac; } } } .picture-item:hover { box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); margin-top: -1px; cursor: pointer; } } } 全部代码
Do something you love.
"Success is not final, failure is not fatal: it is the courage to continue that counts."
{{ cardList[0].title }}
{{ cardList[0].content }}
{{ cardList[1].title }}
{{ cardList[1].content }}
{{ cardList[2].title }}
{{ cardList[2].content }}
图片墙
图片墙记录着我们团队的欢笑、汗水和努力。在这里，你可以看到我们团队成员充满激情地合作、创新和研发出优秀的产品。这些照片展示了多元化的团队文化，我们鼓励员工发挥创造力，分享彼此的成功和成长。
{{ item.bannerData1 }}
{{ item.bannerData2 }}
理念
我们的理念是通过技术与人文的结合，解决现实生活中的问题，推动社会的进步和发展。
我们相信，现代互联网技术可以拓展人类的视野，打破地域的限制，让人们更加便捷地获取信息、交流和合作。通过创新，我们为客户提供前瞻性的产品和服务，帮助他们在激烈的市场竞争中脱颖而出。
