瀏覽代碼

轮播图

ctt_ywq
congzc 2 年之前
父節點
當前提交
d51445f51f
共有 3 個文件被更改,包括 202 次插入141 次删除
  1. 二進制
      src/assets/img/zhongzhiren.jpg
  2. +201
    -140
      src/components/home/home.vue
  3. +1
    -1
      src/components/views/shadow.vue

二進制
src/assets/img/zhongzhiren.jpg 查看文件

Before After
Width: 1003  |  Height: 533  |  Size: 76 KiB

+ 201
- 140
src/components/home/home.vue 查看文件

@@ -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 ? '解决方案' : 'Solutions' }}
{{ characters == 1 ? '丰富的场景解决方案' : 'Metavatar solutions for variety use cases' }}
</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: false,
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: 14px;
margin-bottom: 30px;
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: 28px;
text-indent: 0em;
font-size: 30px;
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: 20px;
// 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: 130px;
margin-bottom: 70px;
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%;


+ 1
- 1
src/components/views/shadow.vue 查看文件

@@ -79,7 +79,7 @@
<div class="title" v-if="characters == 1">中之人驱动</div> <div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div> <div class="title" v-if="characters != 1">“中の人” driving</div>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" alt="" /> <img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" alt="" />
<img v-if="characters != 1" src="../../assets/img/zhongzhiren.png" alt="" />
<img v-if="characters != 1" src="../../assets/img/zhongzhiren.jpg" alt="" />
</div> </div>
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%">


Loading…
取消
儲存