|
- <template>
- <div class="Box">
- <div class="topBox">
- <div class="title1">生动有趣</div>
- <div class="title2">主流艺术风格让您的照片多姿多彩</div>
- <div class="title3">让您在社交媒体上展示个性自我</div>
- <div class="btn">立刻体验</div>
- </div>
- <div class="vdBox"></div>
- <div class="caseBox">
- <div class="title">邃芒ai数字人10大个性化特点</div>
- <div class="caseLsit">
- <div class="itemBox" v-for="(item,index) in 10" :key="index">
- <img src="../../assets/img/styleAdd1.png" alt>
- <div class="itemCont">文案</div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { mapState } from "vuex";
- export default {
- data() {
- return {};
- },
- computed: {
- ...mapState({
- characters: state => state.publicObj.characters
- })
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .Box {
- margin-top: 70px;
- // background-color: #202020;
- overflow: hidden;
- .topBox {
- height: 1080px;
- background: #202020;
- background-image: url("../../assets/img/styleAdd_bg.png");
- background-repeat: no-repeat;
- // background-size: 100% 100%;
- background-position-x: 854px;
- background-position-y: 300px;
- overflow: hidden;
- .title1 {
- margin-left: 192px;
- margin-top: 371px;
- font-size: 48px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- line-height: 62px;
- }
- .title2 {
- margin-left: 192px;
- font-size: 48px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- line-height: 62px;
- }
- .title3 {
- margin-left: 192px;
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #fefefe;
- line-height: 62px;
- }
- .btn {
- margin-top: 60px;
- margin-left: 192px;
- width: 220px;
- height: 60px;
- border: 2px solid #ffffff;
- border-radius: 30px;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- line-height: 62px;
- text-align: center;
- cursor: pointer;
- }
- }
- .vdBox {
- height: 1080px;
- background-image: url("../../assets/img/vd.png");
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .caseBox {
- height: 1080px;
- background: #fff;
- overflow: hidden;
- .title {
- text-align: center;
- font-size: 24px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #232324;
- line-height: 62px;
- margin: 120px 0;
- }
- .caseLsit {
- width: 1280px;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- margin: 0 auto;
- .itemBox {
- width: 240px;
- height: 240px;
- position: relative;
- margin-bottom: 20px;
- img {
- width: 100%;
- height: 100%;
- }
- .itemCont {
- width: 100%;
- font-size: 14px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- line-height: 24px;
- text-align: center;
- position: absolute;
- left: 0;
- bottom: 26px;
- }
- }
- }
- }
- }
- </style>
|