<template>
    <div class="aboutmessage">
        <div class="about position-relative">
            <div class="message position-absolute">
                <h1 class="color-fff font-bold">About Us</h1>
                <div class="color-fff" :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-24 aboutitem'">
                    <strong>·&emsp;</strong>
                    <p class="content">
                        MONTIERI Group is an one-stop service solution for international Hotel and real estate project
                        development. Company was established in 2002, aims to provide one-stop solutions from design to
                        product.
                        We have developed branches in many cities in China，USA and Canada. We have successfully done many
                        international projects globally.
                    </p>
                </div>
                <div class="color-fff aboutitem" :class="mobileShow ? 'font-size-14 aboutitem1' : 'font-size-24 aboutitem'">
                    <strong>·&emsp;</strong>
                    <p class="content">
                        We have more than 17 years overseas experience, professional management and operation experience.
                        The critical point is working backwards in mind, seeking and achieving value for every project and
                        client. Then, working from achieving value to budget, time and quality, back to create a feasible
                        concept. MONTIERI also invested in real estate projects in California and Canada。
                    </p>
                </div>
                <span class="color-fff btn position-absolute" :class="mobileShow ? 'font-size-20' : 'font-size-26'"
                    @click="goPage">Back</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '../router';
import { onMounted, ref } from 'vue';

const goPage = () => {
    router.back()
}

let mobileShow = ref<any>(false)
onMounted(() => {
    if (document.body.offsetWidth < 960) {
        mobileShow.value = true
    } else {
        mobileShow.value = false
    }
    window.addEventListener('resize', function () {
        if (document.body.offsetWidth < 960) {
            mobileShow.value = true
        } else {
            mobileShow.value = false
        }
    })
})
</script>

<style scoped lang="less">
.aboutmessage {
    box-sizing: border-box;
    // width: 100vw;
    // height: 100vw;

    .about {
        // height: 48.3rem;
        height: 65rem;
        background: url("../assets/img/aboutus.jpg") no-repeat;
        background-size: cover;
        // background-position: center;
        box-sizing: border-box;

        .message {
            box-sizing: border-box;
            background: rgba(137, 144, 153, 0.35);
            top: 50%;
            transform: translateY(-50%);
            height: 50%;
            padding: 2vw 3vw;
            overflow: hidden;
            // height: 40%;
            display: flex;
            flex-direction: column;
            line-height: 2.5rem;

            .aboutitem {
                margin-top: 2vw;
                display: flex;

                .content {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                    display: -moz-box;
                    -moz-line-clamp: 4;
                    -moz-box-orient: vertical;
                    word-wrap: break-word;
                    word-break: break-all;
                    white-space: normal;
                }
            }

            .aboutitem1 {
                margin-top: 2vw;
                display: flex;

                .content {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 6;
                    -webkit-box-orient: vertical;
                    display: -moz-box;
                    -moz-line-clamp: 6;
                    -moz-box-orient: vertical;
                    word-wrap: break-word;
                    word-break: break-all;
                    white-space: normal;
                }
            }

            .btn {
                border: 1px solid #eee;
                cursor: pointer;
                padding: 0.5rem 2rem;
                bottom: 1vw;
                left: 50%;
                transform: translateX(-50%);
            }

            .btn:hover {
                border: 1px solid #fa8106;
                color: #fa8106;
            }
        }
    }
}


@media screen and (max-width: 960px) {
    .aboutmessage {
        .about {
            height: 50rem;
            background: url("../assets/img/aboutus.jpg") no-repeat;
        }
    }
}
</style>