diff --git a/src/views/home/section-footer.vue b/src/views/home/section-footer.vue index b15b15d..6605cc8 100644 --- a/src/views/home/section-footer.vue +++ b/src/views/home/section-footer.vue @@ -1,8 +1,54 @@ @@ -14,9 +60,98 @@ .section-footer { background-color: #f6f6f6; border-top: 0.1rem solid #232323; - > .logo { - width: auto; - height: 3rem; + > .content { + display: flex; + min-height: 37rem; + padding: 0 8rem; + border-bottom: 0.1rem solid #c4c4c4; + > div { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 3rem 2rem; + flex: 1; + border-right: 0.1rem solid #c4c4c4; + &:last-child { + border-right: none; + } + } + > .mate { + > .logos { + margin-bottom: 3rem; + display: flex; + gap: 2.9rem; + > img { + width: auto; + height: 3rem; + } + } + > .tip { + font-family: KaiseiOpti-Regular; + font-size: 1.4rem; + line-height: 140%; + color: #585858; + margin-bottom: 4.4rem; + } + > .link { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 0.1rem solid #232323; + user-select: none; + cursor: pointer; + > .text { + font-size: 1.4rem; + line-height: 120%; + color: #232323; + margin-right: 1rem; + } + > .icon { + width: 2.4rem; + height: 2.4rem; + transform: rotate(-45deg); + } + } + } + > .help, + > .polices, + > .company { + > .title { + font-family: KaiseiOpti-Bold; + font-size: 1.8rem; + color: #232323; + margin-bottom: 2.3rem; + } + > .item { + font-family: KaiseiOpti-Regular; + font-size: 1.4rem; + color: #585858; + margin-bottom: 0.6rem; + line-height: 2rem; + user-select: none; + cursor: pointer; + } + } + } + > .footer { + padding: 0 8rem; + height: 7rem; + display: flex; + align-items: center; + justify-content: space-between; + > .left { + font-family: KaiseiOpti-Regular; + font-size: 1.2rem; + color: #585858; + } + > .right { + display: flex; + > img { + width: 2rem; + height: 2rem; + margin-left: 1.6rem; + } + } } }