diff --git a/montier/src/App.vue b/montier/src/App.vue index c380d70..fdd018e 100644 --- a/montier/src/App.vue +++ b/montier/src/App.vue @@ -40,7 +40,7 @@ onMounted(() => { .appview{ display: flex; flex-direction: column; - height: 100vh; + // height: 100vh; .header{ width: 100%; } diff --git a/montier/src/assets/img/Door/101.png b/montier/src/assets/img/Door/101.png new file mode 100644 index 0000000..fb067e0 Binary files /dev/null and b/montier/src/assets/img/Door/101.png differ diff --git a/montier/src/assets/img/Door/102.png b/montier/src/assets/img/Door/102.png new file mode 100644 index 0000000..f476d4f Binary files /dev/null and b/montier/src/assets/img/Door/102.png differ diff --git a/montier/src/assets/img/Door/103.png b/montier/src/assets/img/Door/103.png new file mode 100644 index 0000000..41e1a67 Binary files /dev/null and b/montier/src/assets/img/Door/103.png differ diff --git a/montier/src/assets/img/Door/104.png b/montier/src/assets/img/Door/104.png new file mode 100644 index 0000000..b4c8a06 Binary files /dev/null and b/montier/src/assets/img/Door/104.png differ diff --git a/montier/src/assets/img/Door/105.png b/montier/src/assets/img/Door/105.png new file mode 100644 index 0000000..b1850c6 Binary files /dev/null and b/montier/src/assets/img/Door/105.png differ diff --git a/montier/src/assets/img/Door/106.png b/montier/src/assets/img/Door/106.png new file mode 100644 index 0000000..b9715fe Binary files /dev/null and b/montier/src/assets/img/Door/106.png differ diff --git a/montier/src/assets/img/Door/107.png b/montier/src/assets/img/Door/107.png new file mode 100644 index 0000000..6121c92 Binary files /dev/null and b/montier/src/assets/img/Door/107.png differ diff --git a/montier/src/assets/img/Door/108.png b/montier/src/assets/img/Door/108.png new file mode 100644 index 0000000..e144677 Binary files /dev/null and b/montier/src/assets/img/Door/108.png differ diff --git a/montier/src/assets/img/page02.jpg b/montier/src/assets/img/page02.jpg new file mode 100644 index 0000000..4719d31 Binary files /dev/null and b/montier/src/assets/img/page02.jpg differ diff --git a/montier/src/components/HeaderPage.vue b/montier/src/components/HeaderPage.vue index eb1deaf..aa3d81a 100644 --- a/montier/src/components/HeaderPage.vue +++ b/montier/src/components/HeaderPage.vue @@ -253,14 +253,14 @@ const getProduct = async () => { {{ item.title }} - + - + diff --git a/montier/src/pages/AboutMessage.vue b/montier/src/pages/AboutMessage.vue index e057c0a..44f6946 100644 --- a/montier/src/pages/AboutMessage.vue +++ b/montier/src/pages/AboutMessage.vue @@ -56,10 +56,12 @@ onMounted(() => { \ No newline at end of file +} \ No newline at end of file diff --git a/montier/src/pages/Procurement.vue b/montier/src/pages/Procurement.vue index 3c591af..dd3af8d 100644 --- a/montier/src/pages/Procurement.vue +++ b/montier/src/pages/Procurement.vue @@ -3,8 +3,8 @@
- - + +
@@ -62,8 +62,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { title: 'Design', content: 'Solving all problems from design, and work out a practical scheme.They are project planning, archi-tectural design, interior design, product design.These four parts from a closed loop.', img: [ - { details: '/src/assets/img/Design01.jpg', name: 'Design' }, - { details: '/src/assets/img/Design02.jpg', name: 'Design' }, + { details: new URL("../assets/img/Design01.jpg", import.meta.url).href, name: 'Design' }, + { details: new URL("../assets/img/Design02.jpg", import.meta.url).href, name: 'Design' }, ] } }else if(newValue == '1'){ @@ -71,8 +71,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { title: 'After -sale Service', content: 'We care about quality and care about longtime performance. After sales service is crucial for our business procedure. We offer online and swift response for after sales services.', img: [ - { details: '/src/assets/img/After-saleService01.jpg', name: 'After -sale Service' }, - { details: '/src/assets/img/After-saleService02.jpg', name: 'After -sale Service' }, + { details: new URL("../assets/img/After-saleService01.jpg", import.meta.url).href, name: 'After -sale Service' }, + { details: new URL("../assets/img/After-saleService02.jpg", import.meta.url).href, name: 'After -sale Service' }, ] } }else if(newValue == '2'){ @@ -80,8 +80,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { title: 'Manufacture', content: 'We are able to mass-customize products efficiently as per the approved specification. We manufacture case-goods, upholstery items and all type of solidwood products, as well as decorative lightings.Flexiblity of custom-made system achieve a lower costsin mass product.', img: [ - { details: '/src/assets/img/Manufacture01.jpg', name: 'Manufacture' }, - { details: '/src/assets/img/Manufacture02.jpg', name: 'Manufacture' }, + { details: new URL("../assets/img/Manufacture01.jpg", import.meta.url).href, name: 'Manufacture' }, + { details: new URL("../assets/img/Manufacture02.jpg", import.meta.url).href, name: 'Manufacture' }, ] } }else if(newValue == '3'){ @@ -89,8 +89,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { title: 'Installation', content: 'We have our installation teams for site measurement taken and installation condition analysis. Our installation team is expert on flooring, mill work, cabinets, drapery，wall covering, and carpet.', img: [ - { details: '/src/assets/img/Installation01.jpg', name: 'Installation' }, - { details: '/src/assets/img/Installation02.jpg', name: 'Installation' }, + { details: new URL("../assets/img/Installation01.jpg", import.meta.url).href, name: 'Installation' }, + { details: new URL("../assets/img/Installation02.jpg", import.meta.url).href, name: 'Installation' }, ] } }else if(newValue == '4'){ @@ -98,8 +98,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { title: 'Quality', content: 'Product quality is the lifeline of an company and the fundamental guarantee of its sustainable development. We have implemented a complex quality system to review all material and standard operating procedures are audited regularly to ensure the standards are met. MONTIER can deliver excellent products in line with German quality.', img: [ - { details: '/src/assets/img/Quality01.jpg', name: 'Quality' }, - { details: '/src/assets/img/Quality02.jpg', name: 'Quality' }, + { details: new URL("../assets/img/Quality01.jpg", import.meta.url).href, name: 'Quality' }, + { details: new URL("../assets/img/Quality02.jpg", import.meta.url).href, name: 'Quality' }, ] } }else if(newValue == '5'){ @@ -107,8 +107,8 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { title: 'Logistics', content: 'We work with 3rd party forwarder for local and overseas logistic. For different schedule of delivery, we will manage warehousing for FF&E.', img: [ - { details: '/src/assets/img/Logistics01.jpg', name: 'Logistics' }, - { details: '/src/assets/img/Logistics02.jpg', name: 'Logistics' }, + { details: new URL("../assets/img/Logistics01.jpg", import.meta.url).href, name: 'Logistics' }, + { details: new URL("../assets/img/Logistics02.jpg", import.meta.url).href, name: 'Logistics' }, ] } } @@ -206,7 +206,7 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { height: 25vw; } - .titledesign { + /* .titledesign { box-sizing: border-box; margin: 0; padding: 0; @@ -216,19 +216,24 @@ watch(() => router.currentRoute.value.query.index, (newValue: any) => { .designtitle { margin-bottom: 2rem; } - } + } */ } .titledesign { + box-sizing: border-box; + margin: 0; + padding: 0; width: 100%; margin-top: 3rem; display: flex; + flex-direction: column; justify-content: space-between; align-items: center; padding: 0 1.5rem; .designtitle { - width: 30%; + width: 100%; + margin-bottom: 1rem; .juxing { width: 2rem; diff --git a/montier/src/pages/Productmessage.vue b/montier/src/pages/Productmessage.vue index 456ba7f..f1db557 100644 --- a/montier/src/pages/Productmessage.vue +++ b/montier/src/pages/Productmessage.vue @@ -2,17 +2,23 @@
Door - Safety, Health, and Environmental + Safety, Health, and Environmental Protection
- -
-

{{ item.title }}

-
- + +
+
+ +
+
+ +
+
@@ -20,14 +26,23 @@ diff --git a/montier/src/pages/ProjectCase.vue b/montier/src/pages/ProjectCase.vue index fd443bf..e9af447 100644 --- a/montier/src/pages/ProjectCase.vue +++ b/montier/src/pages/ProjectCase.vue @@ -27,7 +27,7 @@
- +

{{ item.name }}

{{ item.address }}

@@ -39,7 +39,7 @@
- +

{{ item.name }}

@@ -49,7 +49,7 @@
-->

EXLORE ALL PROJECTS

-

EXLORE ALL PROJECTS

+

EXLORE ALL PROJECTS

@@ -205,6 +205,9 @@ const changeindex = () => { .hover-scale:hover .project-center-title{ background: #fa8106; } + .hover-scale:hover .project-center-title1{ + background: #fa8106; + } .project-center-title{ bottom: 0; left: 0; @@ -213,7 +216,7 @@ const changeindex = () => { text-align: left; background: rgba(0,0,0,.4); width: 100%; - padding: 0.5rem 1rem; + padding: 1rem 1rem; display: flex; flex-direction: column; justify-content: space-between; diff --git a/montier/src/pages/Service.vue b/montier/src/pages/Service.vue index 4f4d165..2ab707f 100644 --- a/montier/src/pages/Service.vue +++ b/montier/src/pages/Service.vue @@ -5,25 +5,25 @@
-
+

{{ item.title }}

 - +
- -
+
- information +

2023-08-17

@@ -48,18 +48,14 @@ import { ref, onMounted } from 'vue' import router from '../router'; let modules = [Navigation, Pagination, Scrollbar, A11y] -let per = ref(5) -let per1 = ref(3) +let per1 = ref(2) const props = defineProps(['index']) let selectIndex = props.index let newslist = ref([ - { detail: new URL("../assets/img/page01.jpg", import.meta.url).href, title: 'Design' }, - { detail: new URL("../assets/img/page02.jpg", import.meta.url).href, title: 'Procurement & Manufacture' }, - { detail: new URL("../assets/img/page03.jpg", import.meta.url).href, title: 'Logistic and warehouseing' }, - { detail: new URL("../assets/img/page04.jpg", import.meta.url).href, title: 'Installation' }, - { detail: new URL("../assets/img/page05.jpg", import.meta.url).href, title: 'Quality Control' }, + { detail: new URL("../assets/img/information.jpg", import.meta.url).href, title: 'What can we do for you?' }, + { detail: new URL("../assets/img/page02.jpg", import.meta.url).href, title: 'Growth History of MONTIER' } ]) let servicelist = ref([ @@ -87,19 +83,19 @@ const goPage1 = (url: any) => { } onMounted(() => { - if (document.body.offsetWidth < 1000) { - per.value = 2 + if (document.body.offsetWidth < 960) { per1.value = 1 + } else if (newslist.value.length < 3) { + per1.value = newslist.value.length } else { - per.value = 5 per1.value = 3 } window.addEventListener('resize', function () { - if (document.body.offsetWidth < 1000) { - per.value = 2 + if (document.body.offsetWidth < 960) { per1.value = 1 + } else if (newslist.value.length < 3) { + per1.value = newslist.value.length } else { - per.value = 5 per1.value = 3 } }) @@ -135,7 +131,8 @@ onMounted(() => { display: flex; align-items: center; justify-content: center; - .imgtitle1{ + + .imgtitle1 { display: none; } @@ -155,7 +152,7 @@ onMounted(() => { transition: 0.5s linear; .title { - -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent 40%, #fff 100% ); + -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent 40%, #fff 100%); overflow: hidden; } } @@ -170,12 +167,13 @@ onMounted(() => { // img:hover{ // transform: scale(1.2); // } - .imgtitle:hover{ + .imgtitle:hover { bottom: 0; transform: scale(1.2); background: orange; } - .imgtitle:hover + img{ + + .imgtitle:hover+img { transform: scale(1.2); } } @@ -228,15 +226,27 @@ onMounted(() => { } .service-img { - padding: 0 20px; + box-sizing: border-box; + margin: 0; + padding: 0; + // padding: 0 20px; } .hover-scale { - .case-img { - cursor: pointer; - - img { - transition: all 1s; + .case { + width: 70%; + position: relative; + left: 50%; + transform: translateX(-50%); + + .case-img { + cursor: pointer; + + img { + width: 100%; + height: 100%; + transition: all 1s; + } } } @@ -291,29 +301,31 @@ onMounted(() => { } } -:deep(.swiper-button-prev:after) { - display: none; -} +// :deep(.swiper-button-prev:after) { +// display: none; +// } -:deep(.swiper-button-next:after) { - display: none; -} +// :deep(.swiper-button-next:after) { +// display: none; +// } /*自定义样式*/ :deep(.swiper-button-prev) { - color: transparent; - background: url('../assets/img/left.png') no-repeat; - background-size: 100%; - background-position: left; - width: 2vw; + background: rgba(0, 0, 0, 0.2); + // color: transparent; + // background: url('../assets/img/left.png') no-repeat; + // background-size: 100%; + // background-position: left; + // width: 2vw; } :deep(.swiper-button-next) { - color: transparent; - background: url('../assets/img/right.png') no-repeat; - background-size: 100%; - background-position: right; - width: 2vw; + background: rgba(0, 0, 0, 0.2); + // color: transparent; + // background: url('../assets/img/right.png') no-repeat; + // background-size: 100%; + // background-position: right; + // width: 2vw; } .bannerImg { @@ -331,7 +343,7 @@ onMounted(() => { } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1000px) { .gallery-container { scale: 0.4; margin: 0 0 10vw 0; @@ -373,7 +385,7 @@ onMounted(() => { .bannerImg { margin-top: 50px; - width: 100vw; + width: 100%; :deep(.swiper-button-prev) { width: 40px; @@ -383,4 +395,5 @@ onMounted(() => { width: 40px; } } -} +} + diff --git a/montier/src/pages/contactUs.vue b/montier/src/pages/contactUs.vue index b1e2bfb..cee01c2 100644 --- a/montier/src/pages/contactUs.vue +++ b/montier/src/pages/contactUs.vue @@ -146,7 +146,7 @@ onMounted(async ()=>{ .contactUs { width: 100%; // text-align: center; - // margin-top: 4.5vw; + margin-bottom: 12.4vw; .btn{ margin-top: 3rem; position: relative; diff --git a/montier/src/router/index.ts b/montier/src/router/index.ts index 331a6f9..3149aa6 100644 --- a/montier/src/router/index.ts +++ b/montier/src/router/index.ts @@ -28,15 +28,6 @@ const routes = [ description: '' }, }, - // { - // path: '/casedetail', - // component: () => import('../pages/CaseDetails.vue'), - // meta: { title: 'Service' }, - // content: { - // keywords: 'FFE Building materials Smart hotelEnergy Saving', - // description: '' - // }, - // }, { path: '/contactUs', component: () => import('../pages/contactUs.vue'), diff --git a/montier/src/store/modules/homepage.ts b/montier/src/store/modules/homepage.ts index 8a9be67..34aade3 100644 --- a/montier/src/store/modules/homepage.ts +++ b/montier/src/store/modules/homepage.ts @@ -3,7 +3,46 @@ import { defineStore } from "pinia"; const useHomeStore = defineStore('Home', { state: () => { return { - + Entrance: Array( + { detail: new URL("../../assets/img/Door/01.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/02.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/03.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/04.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/05.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/06.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/07.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/08.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/09.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/10.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/11.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/12.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/13.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/14.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/15.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/16.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/17.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/18.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/19.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/20.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/21.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/22.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/23.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/24.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/25.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/26.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/27.png", import.meta.url).href, name: 'Entrance Doors' }, + { detail: new URL("../../assets/img/Door/28.png", import.meta.url).href, name: 'Entrance Doors' }, + ), + Interior: Array( + { detail: new URL("../../assets/img/Door/101.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/102.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/103.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/104.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/105.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/106.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/107.png", import.meta.url).href, name: 'Interior Doors' }, + { detail: new URL("../../assets/img/Door/108.png", import.meta.url).href, name: 'Interior Doors' }, + ) } },