@@ -1,4 +1,4 @@ | |||
<template> | |||
<!-- <template> | |||
<div class="Box"> | |||
<div class="title">遂芒科技</div> | |||
<div class="cont"> | |||
@@ -128,4 +128,4 @@ export default { | |||
} | |||
} | |||
</style> | |||
--> |
@@ -14,7 +14,8 @@ | |||
</div> | |||
<div class="module_1"> | |||
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> | |||
<!-- <video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> | |||
<video ref="vidoe" src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> | |||
<div class="titleBox" @click="goLogin"> | |||
<div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> | |||
<div class="title_item2" v-if="characters == 1">沉淀数字资产</div> | |||
@@ -62,7 +63,7 @@ | |||
<div class="module_3" id="module_3"> | |||
<div class="imgBox1"> | |||
<img src="../../assets/img/module_3_1.png" alt /> | |||
<img src="https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/module_3_1.png" alt /> | |||
</div> | |||
<!-- <div class="imgBox2"> | |||
<img src="../../assets/img/module_3_2.png" alt> | |||
@@ -93,12 +94,12 @@ | |||
<img src="../../assets/img/module_3_1.png" alt> | |||
</div>--> | |||
<div class="imgBox2"> | |||
<img src="../../assets/img/module_3_2.png" alt /> | |||
<img src="https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/module_3_2.png" alt /> | |||
</div> | |||
</div> | |||
<div class="module_5" id="module_5"> | |||
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1" /> | |||
<img src="https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/module_5_bg2.png" alt class="module_5_bg1" /> | |||
<div class="titleBox"> | |||
<div class="title"> | |||
{{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }} | |||
@@ -399,56 +400,56 @@ export default { | |||
dialogVisible: false, | |||
module_6_data: [ | |||
{ | |||
url: require('../../assets/img/demo_4.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_4.png', | |||
name: '教育', | |||
name_y: 'Education', | |||
des: '创新和丰富的学习体验', | |||
des_y: 'Innovative & richinng the learning experience' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_3.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_3.png', | |||
name: '金融', | |||
name_y: 'Finance', | |||
des: '加强客户服务,通过新颖的互动方式与客户搭建沟通桥梁', | |||
des_y: 'Enhance customer service, engage client relations through new innteravtive ways' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_5.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_5.png', | |||
name: ' 电商', | |||
name_y: 'E-commerce', | |||
des: '7*24全天候数字员工线上销售和品牌推广', | |||
des_y: '7*24 employee online selling & brands promotion' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_7.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_7.png', | |||
name: '零售与品牌', | |||
name_y: 'Retails', | |||
des: '数字广告代言人以前所未有的方式打造品牌', | |||
des_y: 'Branding in a different new way by digital Ads endorsers.' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_1.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_1.png', | |||
name: '技术服务', | |||
name_y: 'Avatar tech provider', | |||
des: '可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中', | |||
des_y: 'Provide all capability of avatar creation, manipulation & interactive of metavatar to deploy them in your own applications.' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_2.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_2.png', | |||
name: '娱乐', | |||
name_y: 'Entertaining', | |||
des: '让您在元宇宙中拥有时尚靓丽的数字孪生', | |||
des_y: 'Exiciting etertaning experience by digital twins, stylishing the pictures & video, great looking avatars in metaverse.' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_6.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_6.png', | |||
name: '影视特效 ', | |||
name_y: 'Special Effects', | |||
des: '通过Ai技术在电影特效中使用虚拟角色,极大的提高了效率,加强视觉效果', | |||
des_y: 'A.I. technology for avatars deployed in movie special effects, great enhancement of effects production.' | |||
}, | |||
{ | |||
url: require('../../assets/img/demo_8.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/demo_8.png', | |||
name: '公共服务', | |||
name_y: 'Public Sector', | |||
des: '当人们需要帮助和助手时,数字公共服务人员24*7随时为您的繁重工作待命', | |||
@@ -457,30 +458,30 @@ export default { | |||
], | |||
carouselLsit: [ | |||
{ | |||
url: require('../../assets/img/carousel1.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel1.png' | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel2.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel2.png' | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel3.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png' | |||
} | |||
], | |||
partnerLsit: [ | |||
{ | |||
url: require('../../assets/img/partner1.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner1.png' | |||
}, | |||
{ | |||
url: require('../../assets/img/partner2.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner2.png' | |||
}, | |||
{ | |||
url: require('../../assets/img/partner3.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner3.png' | |||
}, | |||
{ | |||
url: require('../../assets/img/partner4.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner4.png' | |||
}, | |||
{ | |||
url: require('../../assets/img/partner5.png') | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/partner5.png' | |||
} | |||
], | |||
timeLsit: [ | |||
@@ -492,7 +493,7 @@ export default { | |||
// ctn2: "团队组建" | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel2.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel2.png', | |||
title: '2019', | |||
ctn1_y: 'Deliver the first movie project in May. 2019', | |||
// ctn2_y: "Deliver the first movie project in May. 2019", | |||
@@ -500,7 +501,7 @@ export default { | |||
ctn2: '项目交付' | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel3.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||
title: '2021-05', | |||
ctn1_y: 'Beta of MetaGene published in May,2021', | |||
// ctn2_y: "Beta of MetaGene published in May,2021", | |||
@@ -509,7 +510,7 @@ export default { | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel3.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||
title: '2021-08', | |||
ctn1_y: 'Metavatar built up in Aug, 2021', | |||
// ctn2_y: "Metavatar built up in Aug, 2021", | |||
@@ -517,7 +518,7 @@ export default { | |||
// ctn2: "邃芒科技成立", | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel3.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||
title: '2022-01', | |||
ctn1_y: 'Angel fund in Jan, 2022', | |||
// ctn2_y: "Angel fund in Jan, 2022", | |||
@@ -525,7 +526,7 @@ export default { | |||
// ctn2: "获得天使轮融资", | |||
}, | |||
{ | |||
url: require('../../assets/img/carousel3.png'), | |||
url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||
title: '2022-06', | |||
ctn1_y: 'Deliver the first project based on Magenta for our strategic partner in Jun,2022', | |||
// ctn2_y: "Beta of MetaGene published in May,2021", | |||
@@ -1,141 +0,0 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="topBox"> | |||
<div class="title1">生动有趣</div> | |||
<div class="title2">主流艺术风格让您的照片多姿多彩</div> | |||
<div class="title3">让您在社交媒体上展示个性自我</div> | |||
<div class="btn">立刻体验</div> | |||
</div> | |||
<div class="vdBox"></div> | |||
<div class="caseBox"> | |||
<div class="title">邃芒ai数字人10大个性化特点</div> | |||
<div class="caseLsit"> | |||
<div class="itemBox" v-for="(item,index) in 10" :key="index"> | |||
<img src="../../assets/img/styleAdd1.png" alt> | |||
<div class="itemCont">文案</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { mapState } from "vuex"; | |||
export default { | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: state => state.publicObj.characters | |||
}) | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.Box { | |||
margin-top: 70px; | |||
// background-color: #202020; | |||
overflow: hidden; | |||
.topBox { | |||
height: 1080px; | |||
background: #202020; | |||
background-image: url("../../assets/img/styleAdd_bg.png"); | |||
background-repeat: no-repeat; | |||
// background-size: 100% 100%; | |||
background-position-x: 854px; | |||
background-position-y: 300px; | |||
overflow: hidden; | |||
.title1 { | |||
margin-left: 192px; | |||
margin-top: 371px; | |||
font-size: 48px; | |||
font-family: Source Han Sans CN; | |||
font-weight: 400; | |||
color: #ffffff; | |||
line-height: 62px; | |||
} | |||
.title2 { | |||
margin-left: 192px; | |||
font-size: 48px; | |||
font-family: Source Han Sans CN; | |||
font-weight: 400; | |||
color: #ffffff; | |||
line-height: 62px; | |||
} | |||
.title3 { | |||
margin-left: 192px; | |||
font-size: 16px; | |||
font-family: Source Han Sans CN; | |||
font-weight: 400; | |||
color: #fefefe; | |||
line-height: 62px; | |||
} | |||
.btn { | |||
margin-top: 60px; | |||
margin-left: 192px; | |||
width: 220px; | |||
height: 60px; | |||
border: 2px solid #ffffff; | |||
border-radius: 30px; | |||
font-size: 18px; | |||
font-family: Source Han Sans CN; | |||
font-weight: 400; | |||
color: #ffffff; | |||
line-height: 62px; | |||
text-align: center; | |||
cursor: pointer; | |||
} | |||
} | |||
.vdBox { | |||
height: 1080px; | |||
background-image: url("../../assets/img/vd.png"); | |||
background-repeat: no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
.caseBox { | |||
height: 1080px; | |||
background: #fff; | |||
overflow: hidden; | |||
.title { | |||
text-align: center; | |||
font-size: 24px; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #232324; | |||
line-height: 62px; | |||
margin: 120px 0; | |||
} | |||
.caseLsit { | |||
width: 1280px; | |||
display: flex; | |||
justify-content: space-between; | |||
flex-wrap: wrap; | |||
margin: 0 auto; | |||
.itemBox { | |||
width: 240px; | |||
height: 240px; | |||
position: relative; | |||
margin-bottom: 20px; | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.itemCont { | |||
width: 100%; | |||
font-size: 14px; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #ffffff; | |||
line-height: 24px; | |||
text-align: center; | |||
position: absolute; | |||
left: 0; | |||
bottom: 26px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> | |||
@@ -21,11 +21,6 @@ const routes = [ | |||
name: 'aboutUs', | |||
component: () => import("../components/aboutUs/aboutUs"), | |||
}, | |||
{ | |||
path: '/styleAdd', | |||
name: 'styleAdd', | |||
component: () => import("../components/styleAdd/styleAdd"), | |||
}, | |||
// 登录 | |||
{ | |||
path: '/login', | |||
@@ -36,8 +36,8 @@ | |||
<!-- 渐变遮罩层 --> | |||
<div class="waterFall-item-mask"> | |||
<div>{{ item.title || '无标题' }}</div> | |||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div v-if="item.videoStatus == 5">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div v-if="item.videoStatus == 5">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功--> | |||
@@ -71,8 +71,10 @@ | |||
<div v-if="videoList.length > 0" class="videoModel" :key="index"> | |||
<!-- 左侧图片 --> | |||
<div class="videoPrv" @click="goDetail(item)"> | |||
<img src="../../assets/img/BG@2x.png" /> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<!-- <img src="../../assets/img/BG@2x.png" /> --> | |||
<img src="../../assets/img/logoh.png" /> | |||
<!-- <div v-if="item.videoStatus == 0" class="cover">草稿</div> --> | |||
<div v-if="item.videoStatus == 0" class="cover"></div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||
@@ -166,8 +168,10 @@ export default { | |||
pageSize: 6, | |||
prePage: '', | |||
total: '', | |||
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||
defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||
// defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||
// defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||
defaultImg: require('@/assets/img/logoh.png'), //默认图片 | |||
defaultImg1: require('@/assets/img/logoh.png'), //默认图片 | |||
listActive: 1 // 显示列表样式 | |||
}; | |||
}, | |||
@@ -512,8 +516,9 @@ export default { | |||
// background-color: #979797; | |||
img { | |||
position: absolute; | |||
top: 25px; | |||
width: 140px; | |||
height: 100px; | |||
height: 50px; | |||
border-radius: 6px; | |||
} | |||
.cover { | |||
@@ -533,6 +538,7 @@ export default { | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
margin-top: 10px; | |||
.videoName { | |||
width: 100%; | |||
font-size: 16px; | |||
@@ -748,6 +754,8 @@ export default { | |||
position: relative; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
// min-width: 200px; | |||
min-height: 100px; | |||
} | |||
img { | |||
max-width: 100%; | |||
@@ -760,7 +768,7 @@ export default { | |||
left: 0; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-around; | |||
justify-content: flex-end; | |||
padding: 5px 8px 5px; | |||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); | |||
height: 80px; | |||
@@ -770,6 +778,7 @@ export default { | |||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
margin-bottom: 3px; | |||
} | |||
} | |||
&-state { | |||
@@ -1,5 +1,6 @@ | |||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
const CompressionWebpackPlugin = require('compression-webpack-plugin'); | |||
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 压缩js | |||
const imageWebpackLoader = require('image-webpack-loader');//压缩图片 | |||
const path = require('path'); | |||
const resolve = dir => { | |||
return path.join(__dirname, dir) | |||
@@ -19,8 +20,8 @@ if (isProduction) { | |||
'vue': 'Vue', | |||
'vant': 'vant', | |||
'element-ui': 'ELEMENT', | |||
'vuex': 'Vuex', | |||
'vue-router': 'VueRouter', | |||
// 'vuex': 'Vuex', | |||
// 'vue-router': 'VueRouter', | |||
} | |||
cdn = { | |||
css: [ | |||
@@ -28,11 +29,11 @@ if (isProduction) { | |||
], | |||
js: [ | |||
// vue must at first! | |||
'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs | |||
'https://unpkg.com/vant@2.12/lib/vant.min.js', //vant | |||
'https://unpkg.com/element-ui/lib/index.js', // element-ui js | |||
'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.min.js',//vuex | |||
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.global.min.js',//vue-router | |||
'https://unpkg.com/vue@2.6.11/dist/vue.js', // vuejs | |||
'https://unpkg.com/vant@2.12.48/lib/vant.min.js', //vant | |||
'https://unpkg.com/element-ui@2.15.12/lib/index.js', // element-ui js | |||
// 'https://cdn.bootcdn.net/ajax/libs/vuex/3.4.0/vuex.global.min.js',//vuex | |||
// 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.global.min.js',//vue-router | |||
] | |||
} | |||
} | |||
@@ -104,21 +105,55 @@ module.exports = { | |||
args[0].favicon = './public/favicon.ico'; | |||
return args; | |||
}); | |||
// 注入cdn变量 (打包时会执行) | |||
config.plugin('html').tap(args => { | |||
args[0].cdn = cdn // 配置cdn给插件 | |||
return args | |||
}) | |||
// 压缩js | |||
config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ | |||
test: /\.(js|css|scss)$/, // 匹配文件名 | |||
threshold: 20480, // 对超过20k的数据压缩 | |||
minRatio: 0.8, | |||
deleteOriginalAssets: true // 删除源文件 | |||
// 图片路径 | |||
config.module.rule('images') | |||
.use('url-loader') | |||
.tap(options => ({ | |||
name: './assets/images/[name].[ext]', | |||
quality: 85, | |||
limit: 0, | |||
esModule: false, | |||
})) | |||
//图片压缩 | |||
config.module | |||
.rule('images') | |||
.use('image-webpack-loader') | |||
.loader('image-webpack-loader') | |||
.options({ | |||
mozjpeg: { | |||
progressive: true, | |||
quality: 65 | |||
}, | |||
optipng: { | |||
enabled: false | |||
}, | |||
pngquant: { | |||
quality: [0.65, 0.9], | |||
speed: 4 | |||
}, | |||
gifsicle: { | |||
interlaced: false | |||
}, | |||
webp: { | |||
quality: 75 | |||
} | |||
}) | |||
.end(); | |||
// 压缩js,只能线上,本地会js访问错误 | |||
if (process.env.VUE_APP_ENV != 'development') { | |||
// config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({ | |||
// test: /\.(js|css|scss)$/, // 匹配文件名 | |||
// threshold: 20480, // 对超过20k的数据压缩 | |||
// minRatio: 0.8, | |||
// deleteOriginalAssets: true // 删除源文件 | |||
// })) | |||
} | |||
@@ -4292,7 +4292,7 @@ ignore@^5.1.1: | |||
image-webpack-loader@^8.1.0: | |||
version "8.1.0" | |||
resolved "https://registry.npmmirror.com/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz" | |||
resolved "https://registry.npmmirror.com/image-webpack-loader/-/image-webpack-loader-8.1.0.tgz#cd97172e1e7304ef5eb898344fc25bbb650fc7d7" | |||
integrity sha512-bxzMIBNu42KGo6Bc9YMB0QEUt+XuVTl2ZSX3oGAlbsqYOkxkT4TEWvVsnwUkCRCYISJrMCEc/s0y8OYrmEfUOg== | |||
dependencies: | |||
imagemin "^7.0.1" | |||