@@ -30,16 +30,18 @@
<div class="ctnBox">
<div class="ctnBox">
<div class="title_ctn1">
<div class="title_ctn1">
{{
{{
characters == 1
? '用户仅需输入文字或语音,即可实现智能全自动的内容生产(AIGC)'
: 'Unlock the Power of Multimodal Input: Seamlessly Manipulate Virtual Humans through Text and Audio in Multiple Languages.Unleash Exiiting Realism with Metavatar AIGC Pipeline: High-Resolution, Naturally Vivid Character Movements.Bring new intelligence experience for user far more exciting than ever in few minutes'
characters == 1 ? '用户仅需输入文字或语音,即可实现智能全自动的内容生产(AIGC)' : 'Multimodal Input: Seamlessly Manipulate Virtual Humans through Text and Audio in Multiple Languages.'
}}
}}
</div>
</div>
<div class="title_ctn1">
<div class="title_ctn1">
{{ characters == 1 ? '呈现出色的真实感和流畅度,卓越的自然度,自动辨认支持多语言' : '' }}
{{
characters == 1
? '呈现出色的真实感和流畅度,卓越的自然度,自动辨认支持多语言'
: 'Unleash Exiiting Realism with Metavatar AIGC Pipeline: High-Resolution, Naturally Vivid Character Movements.'
}}
</div>
</div>
<div v-if="false" class="title_ctn1" style="margin-bottom: 50px">
{{ 'All in few minutes, bring new intelligence experience far more exciting than ever' }}
<div v-if="characters != 1 " class="title_ctn1" style="margin-bottom: 50px">
{{ 'Bring new intelligence experience for user far more exciting than ever in few minutes ' }}
</div>
</div>
</div>
</div>
</div>
</div>
@@ -52,11 +54,11 @@
</div>
</div>
<div class="ctnBox">
<div class="ctnBox">
<div class="title_ctn1" :style="characters == 1 ? 'margin-bottom: 8px' : ''" >
<div class="title_ctn1">
{{ characters == 1 ? '用户通过输入视频,即可快速替换各种背景下的视频,短片,影视剧人物' : 'Elevating Vtuber Manipulation with "中の人" Capability for Unmatched Expression' }}
{{ characters == 1 ? '用户通过输入视频,即可快速替换各种背景下的视频,短片,影视剧人物' : 'Elevating Vtuber Manipulation with "中の人" Capability for Unmatched Expression' }}
</div>
</div>
<div class="title_ctn1">
<div class="title_ctn1">
{{ characters == 1 ? '实现数字内容生产大幅节省成本,提高生产效率。 提供丰富的体验' : 'On-Demand Video Generation and Content Broadcasting for Complex Cases' }}
{{ characters == 1 ? '实现数字内容生产大幅节省成本提高生产效率, 提供丰富的体验' : 'On-Demand Video Generation and Content Broadcasting for Complex Cases' }}
</div>
</div>
<div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 20px">
<div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 20px">
{{ 'Cost-Saving and Extendable User Experience for Digital Content Production' }}
{{ 'Cost-Saving and Extendable User Experience for Digital Content Production' }}
@@ -132,7 +134,7 @@
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg_cut.png" alt="" /> -->
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg_cut.png" alt="" /> -->
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
<div class="title">
<div class="title">
{{ characters == 1 ? 'Metavatar 核心技术' : 'Flexible and Vivid Avatar ' }}
{{ characters == 1 ? 'Metavatar 核心技术' : 'Metavatar Key Technologies ' }}
</div>
</div>
<div class="paragraph">
<div class="paragraph">
{{
{{
@@ -170,10 +172,10 @@
<div class="md1" id="Solutions"></div>
<div class="md1" id="Solutions"></div>
</div>
</div>
<!-- 发展历程 -->
<div class="module_6" id="module_6">
<div class="module_6" id="module_6">
<div class="title">
<div class="title">
{{ characters == 1 ? '解决方案' : 'Solution s' }}
{{ characters == 1 ? '丰富的场景解决方案' : 'Metavatar solutions for variety use case s' }}
</div>
</div>
<div class="imgBox">
<div class="imgBox">
<div class="itemBox" v-for="(item, index) in module_6_data" :key="index">
<div class="itemBox" v-for="(item, index) in module_6_data" :key="index">
@@ -185,33 +187,15 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!-- --------------------------------------------------- -->
<!-- <div class="module_6" id="module_6">
<div class="title">
{{ characters == 1 ? '解决方案' : 'Solutions' }}
</div>
<div class="imgBox">
<div class="itemBox" v-for="(item, index) in module_6_data" :key="index">
<img :src="item.url" alt />
<p class="title">{{ characters == 1 ? item.name : item.name_y }}</p>
<p :class="characters == 1 ? 'des' : 'des_y'">
{{ characters == 1 ? item.des : item.des_y }}
</p>
</div>
</div>
</div> -->
<!-- -------------------------------------------------------------- -->
<!-- -------------------------------------------------------------- -->
<!-- <div class="module_8" id="Cases">
<!-- <div class="module_8" id="Cases">
<div class="title">SELECTED CASES</div>
<div class="title">SELECTED CASES</div>
<div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div>
<div class="title_1">{{ characters == 1 ? '经典案例' : '' }}</div>
<div class="xian"></div>
<div class="xian"></div>
<div class="swiper-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in carouselLsit"
:key="index"
>
<div class="swiper-slide" v-for="(item, index) in carouselLsit" :key="index">
<img class="swiper-slide-img" :src="item.url" />
<img class="swiper-slide-img" :src="item.url" />
</div>
</div>
</div>
</div>
@@ -219,12 +203,12 @@
<div class="swiper-button-next"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="tiktok">
<div class="tiktok">
{{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }}
{{ characters == 1 ? 'tiktok直播Rilloky' : 'tiktokRilloky' }}
</div>
</div>
<div class="tiktok_ctn">
<div class="tiktok_ctn">
{{
{{
characters == 1
characters == 1
? " 随着元宇宙概念的升温,数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线,致力于打造超写实虚"
? ' 随着元宇宙概念的升温,数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线,致力于打造超写实虚'
: "With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI"
: "With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI"
}}
}}
</div>
</div>
@@ -244,16 +228,17 @@
}}
}}
</div> -->
</div> -->
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" :style="characters == 1 ? 'margin-top: 30px' : ''">
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" :style="characters == 1 ? 'margin-top: 30px' : ''">
{{ characters == 1 ? `北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月, ` : 'Metavatar is founded in August 2021, the team built up in year 2018. ' }}
{{ characters == 1 ? `北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月。 ` : 'Metavatar is founded in August 2021, the team built up in year 2018. ' }}
</div>
</div>
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" style="white-space: pre-wrap" >
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
{{
{{
characters == 1
characters == 1
? `通过3年迭代形成AIGC技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才,硕博士占比 > 60%。并在人工智能顶级会议和期刊上发表文章十余篇,包括CVPR、ICCV、ECCV、 ACMMM、TIP、TNNLS等,人工智能顶级竞赛中斩获多项人脸、人体感知竞赛冠军,拥有自主的知识产权和专利两项。`
? `通过3年迭代形成AIGC技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才,硕博士占比 > 60%。并在人工智能顶级会议和期刊上发表文章十余篇,包括CVPR、ICCV、ECCV、 ACMMM、TIP、TNNLS等,人工智能顶级竞赛中斩获多项人脸、人体感知竞赛冠军,拥有自主的知识产权和专利两项。`
: 'Over the past three years, Metavatar has continuously evolved its production process for digital humans, leveraging cutting-edge AI technology. With our industry-leading AI image generation and driving technology, we have amassed a distinctive collection of Asian surreal digital human data assets. These assets have proven successful in industrial-grade film and television productions, brand ownership, and live broadcasting.Our team comprises highly skilled professionals from esteemed scientific research institutions and top-tier universities such as UTS, BUPT, CAS, Tsinghua University. Our talented team members possess advanced degrees, including PhDs and Masters, and are recognized as first-class talents within the industry.'
: 'Over the past three years, Metavatar has continuously evolved its production process for digital humans, leveraging cutting-edge AI technology. With our industry-leading AI image generation and driving technology, we have amassed a distinctive collection of Asian surreal digital human data assets. These assets have proven successful in industrial-grade film and television productions, brand ownership, and live broadcasting.Our team comprises highly skilled professionals from esteemed scientific research institutions and top-tier universities such as UTS, BUPT, CAS, Tsinghua University. Our talented team members possess advanced degrees, including PhDs and Masters, and are recognized as first-class talents within the industry.'
}}
}}
</div>
</div>
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" style="white-space: pre-wrap">
<!-- style="white-space: pre-wrap" 可用于解析""内的 \n -->
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
{{
{{
characters == 1
characters == 1
? `邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。`
? `邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。`
@@ -274,22 +259,8 @@
<div class="timeBox">
<div class="timeBox">
<div class="xian"></div>
<div class="xian"></div>
<!-- <swiper class="timeF" :slides-per-view="3" :space-between="50">
<swiper-slide class="itemBox" v-for="(item, index) in timeLsit" :key="index" @click="timeFlag = index">
<div class="timeText">{{ item.title }}</div>
<div class="ImgBox">
<div class="circle"></div>
</div>
<div class="ctn">
{{ characters == 1 ? item.ctn1 : item.ctn1_y }}
</div>
<div class="ctn">
{{ characters == 1 ? item.ctn2 : item.ctn2_y }}
</div>
</swiper-slide>
</swiper> -->
<!-- ---------------------------------------------- -->
<!-- ---------------------------------------------- -->
<div class="timeF">
<!-- <div class="timeF">
<div
<div
class="itemBox"
class="itemBox"
@mouseenter="enterSwiper(index)"
@mouseenter="enterSwiper(index)"
@@ -309,8 +280,28 @@
{{ characters == 1 ? item.ctn2 : item.ctn2_y }}
{{ characters == 1 ? item.ctn2 : item.ctn2_y }}
</div>
</div>
</div>
</div>
</div> -->
<!-- ----------------------------------------------------- -->
<div class="timeF">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide itemBox" v-for="(item, index) in timeLsit" :key="index">
<div class="timeText">{{ item.title }}</div>
<div class="ImgBox">
<div class="circle"></div>
</div>
<div class="ctn">
{{ characters == 1 ? item.ctn1 : item.ctn1_y }}
</div>
<div class="ctn">
{{ characters == 1 ? item.ctn2 : item.ctn2_y }}
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- ------------------------------------------------- -->
</div>
</div>
<div class="cooperationBox" v-if="characters == 1">
<div class="cooperationBox" v-if="characters == 1">
@@ -629,22 +620,21 @@ export default {
// ctn2_y: "Beta of MetaGene published in May,2021",
// ctn2_y: "Beta of MetaGene published in May,2021",
ctn1: '为战略合作伙伴新奥特',
ctn1: '为战略合作伙伴新奥特',
ctn2: '交付首个基于MetaGene的内容生产项目'
ctn2: '交付首个基于MetaGene的内容生产项目'
},
{
url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
title: '2022年11月',
ctn1_y: 'MetaGene published, Metavatar runs from research to products stage in December 2022.',
ctn1: '邃芒“慧”系列产品首款“慧生”研发完成,',
ctn2: '标志邃芒从技术交付开始迈向产品阶段。'
},
{
url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
title: '2023年3月',
ctn1_y: 'Built up Stable Diffusion pipline, Generative AI & text prompting, all metavatar digital human are much more intelligent.Beta of MetaNuver pulished in Feb 2023',
ctn1: '邃芒开始全面拥抱stable diffusion,连接大模型,',
ctn2: '所有数字人拥有智慧大脑。“慧影“beta研发完成。'
}
}
// ,
// {
// url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
// title: '2022年11月',
// ctn1_y: 'MetaGene published, Metavatar runs from research to products stage in December 2022.',
// ctn1: '邃芒“慧”系列产品首款“慧生”研发完成,',
// ctn2: '标志邃芒从技术交付开始迈向产品阶段。'
// },
// {
// url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
// title: '2023年3月',
// ctn1_y: 'Built up Stable Diffusion pipline, Generative AI & text prompting, all metavatar digital human are much more intelligent.Beta of MetaNuver pulished in Feb 2023',
// ctn1: '邃芒开始全面拥抱stable diffusion,连接大模型,',
// ctn2: '所有数字人拥有智慧大脑。“慧影“beta研发完成。'
// }
]
]
};
};
},
},
@@ -777,10 +767,19 @@ export default {
this.startTimer();
this.startTimer();
// console.log();
// console.log();
new Swiper('.swiper-container', {
new Swiper('.swiper-container', {
slidesPerView: 3,
// slidesPerView: 6,
// spaceBetween: 30,
// centeredSlides: true,
// loop: true,
// autoplay: true,
// loopFillGroupWithBlank: true,
// slidesPerGroup: 1,
// loopedSlides: 5,
slidesPerView: 6,
spaceBetween: 30,
spaceBetween: 30,
centeredSlides: true,
loop: true,
loop: fals e,
autoplay: { disableOnInteraction: false }, // 解决点击按钮自动轮播失效问题
// 如果需要分页器
// 如果需要分页器
pagination: {
pagination: {
@@ -914,16 +913,14 @@ export default {
overflow: hidden;
overflow: hidden;
color: #fff;
color: #fff;
.title_item1 {
.title_item1 {
margin-bottom: 14 px;
margin-bottom: 30 px;
font-size: 42px;
font-size: 42px;
}
}
.title_item1_y {
.title_item1_y {
// margin-bottom: 14px;
font-size: 42px;
}
.title_item1 {
margin-bottom: 30px;
margin-bottom: 30px;
font-size: 42px;
}
}
.title_item2 {
.title_item2 {
margin-bottom: 20px;
margin-bottom: 20px;
font-size: 42px;
font-size: 42px;
@@ -1009,7 +1006,7 @@ export default {
font-family: Microsoft YaHei;
font-family: Microsoft YaHei;
font-weight: 400;
font-weight: 400;
color: #7e7e7e;
color: #7e7e7e;
// margin-bottom: 8px;
margin-bottom: 8px;
}
}
}
}
}
}
@@ -1457,6 +1454,7 @@ export default {
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0.3s;
transition: all 0.3s;
padding: 15px;
padding: 15px;
font-size: 18px;
}
}
.des_y {
.des_y {
position: absolute;
position: absolute;
@@ -1470,6 +1468,7 @@ export default {
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0.3s;
transition: all 0.3s;
padding: 18px;
padding: 18px;
font-size: 18px;
}
}
&:hover {
&:hover {
border-radius: 10px;
border-radius: 10px;
@@ -1479,11 +1478,11 @@ export default {
opacity: 0;
opacity: 0;
}
}
.des {
.des {
font-size: 18px;
// font-size: 18px;
opacity: 1;
opacity: 1;
}
}
.des_y {
.des_y {
font-size: 18px;
// font-size: 18px;
opacity: 1;
opacity: 1;
}
}
}
}
@@ -1636,6 +1635,7 @@ export default {
.module_9 {
.module_9 {
background-color: #d7d8de;
background-color: #d7d8de;
overflow: hidden;
overflow: hidden;
.weBox {
.weBox {
margin-top: 70px;
margin-top: 70px;
margin-left: auto;
margin-left: auto;
@@ -1650,25 +1650,32 @@ export default {
height: 530px;
height: 530px;
background-color: #191919;
background-color: #191919;
float: left;
float: left;
// padding: 20px;
.conBox {
.conBox {
text-indent: 2em;
text-indent: 2em;
width: 500px;
margin: 40px auto 100px auto;
width: 520px;
padding: 20px 20px 0;
// margin: 20px 20px 100px 20px;
.title {
.title {
text-indent: 0em;
text-indent: 0em;
font-size: 30px;
font-size: 30px;
font-family: Inter;
font-family: Inter;
font-weight: 400;
font-weight: 400;
color: #ffffff;
color: #ffffff;
margin-bottom: -10px;
// line-height: 62px;
// line-height: 62px;
text-align: right;
// text-align: right;
}
}
.title_h {
.title_h {
height: 18px ;
font-size: 28 px;
text-indent: 0em ;
font-size: 30 px;
font-family: Microsoft YaHei;
font-family: Microsoft YaHei;
font-weight: 400;
font-weight: 400;
color: #ffffff;
color: #ffffff;
text-align: right;
// text-align: right;
margin-bottom: 20px;
}
}
.ctn {
.ctn {
// width: 434px;
// width: 434px;
@@ -1679,16 +1686,6 @@ export default {
line-height: 24px;
line-height: 24px;
margin-top: 10px;
margin-top: 10px;
}
}
.ctn_c {
text-indent: 0;
// width: 434px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7e7e7e;
line-height: 22px;
// margin-top: 30px;
}
.ctn1 {
.ctn1 {
width: 436px;
width: 436px;
height: 222px;
height: 222px;
@@ -1701,17 +1698,30 @@ export default {
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
}
}
.ctn_c {
width: 100%;
text-indent: 0;
// width: 434px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7e7e7e;
line-height: 22px;
margin-top: 20px;
}
.ctn_c1 {
.ctn_c1 {
width: 436px;
// width: 436px;
// height: 222px;
// height: 222px;
width: 100%;
font-size: 16px;
font-size: 16px;
font-family: Microsoft YaHei;
font-family: Microsoft YaHei;
font-weight: 400;
font-weight: 400;
color: #7e7e7e;
color: #7e7e7e;
line-height: 30px;
line-height: 30px;
// margin-top: 74px;
margin-left: auto;
margin-right: auto;
margin-top: 20 px;
// margin-left: auto;
// margin-right: auto;
}
}
}
}
}
}
@@ -1727,7 +1737,17 @@ export default {
.timeBox {
.timeBox {
// overflow: hidden;
// overflow: hidden;
position: relative;
position: relative;
margin-bottom: 90px;
margin-bottom: 10px;
&:hover .swiper-button-prev {
opacity: 1;
border-radius: 50%;
background-color: #ccc;
}
&:hover .swiper-button-next {
opacity: 1;
border-radius: 50%;
background-color: #ccc;
}
}
}
.xian {
.xian {
width: 100%;
width: 100%;
@@ -1739,11 +1759,52 @@ export default {
left: 0;
left: 0;
}
}
.timeF {
.timeF {
position: relative;
::v-deep .swiper-container {
margin-top: -20px;
width: 100%;
height: 350px !important;
padding-top: 20px !important;
}
::v-deep .swiper-slide {
width: 189px !important;
height: 320px !important;
}
::v-deep .swiper-button-next {
position: absolute;
top: 140px;
right: -80px;
width: 70px;
height: 70px;
opacity: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
transition: all 0.3s;
}
::v-deep .swiper-button-prev {
position: absolute;
top: 140px;
left: -80px;
width: 70px;
height: 70px;
opacity: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
transition: all 0.3s;
// &:hover {
// opacity: 1;
// border-radius: 50%;
// background-color: #ccc;
// }
}
// ::v-deep .swiper-button-disabled {
// opacity: 0.5;
// }
width: 1300px;
width: 1300px;
display: flex;
display: flex;
margin: 0 auto;
margin: 0 auto;
justify-content: space-between;
justify-content: space-between;
.itemBox {
.itemBox {
display: block;
width: 180px;
width: 180px;
height: 250px;
height: 250px;
border: 1px solid #ffffff;
border: 1px solid #ffffff;
@@ -1754,7 +1815,7 @@ export default {
cursor: pointer;
cursor: pointer;
transition: all 0.3s;
transition: all 0.3s;
.timeText {
.timeText {
width: 200px;
// width: 200px;
font-size: 16px;
font-size: 16px;
font-family: Inter;
font-family: Inter;
font-weight: 600;
font-weight: 600;
@@ -1853,7 +1914,7 @@ export default {
margin: 0 auto;
margin: 0 auto;
display: flex;
display: flex;
justify-content: space-between;
justify-content: space-between;
margin-bottom: 13 0px;
margin-bottom: 7 0px;
background-color: #ffffff;
background-color: #ffffff;
border-radius: 30px;
border-radius: 30px;
overflow: hidden;
overflow: hidden;
@@ -1882,47 +1943,47 @@ export default {
}
}
}
}
.swiper-container {
width: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
text-align: center;
font-size: 18px;
background: #fff;
// .swiper-container {
// width: 100%;
// }
// .swiper-slide {
// width: 100%;
// height: 100%;
// text-align: center;
// font-size: 18px;
// background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
// display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
// /* Center slide text vertically */
// display: -webkit-box;
// display: -ms-flexbox;
// // display: -webkit-flex;
// display: flex;
// -webkit-box-pack: center;
// -ms-flex-pack: center;
// -webkit-justify-content: center;
// justify-content: space-evenly;
// -webkit-box-align: center;
// -ms-flex-align: center;
// -webkit-align-items: center;
// align-items: center;
// }
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
// .swiper-slide-active,
// .swiper-slide-duplicate-active {
// transform: scale(1);
// }
.swiper-slide-img {
width: 479px;
height: 600px;
cursor: pointer;
opacity: 0.9;
transition: all 0.3s;
&:hover {
opacity: 1;
transform: scale(1.1);
}
}
// .swiper-slide-img {
// width: 479px;
// height: 600px;
// cursor: pointer;
// opacity: 0.9;
// transition: all 0.3s;
// &:hover {
// opacity: 1;
// transform: scale(1.1);
// }
// }
.topBox {
.topBox {
width: 100%;
width: 100%;