| @@ -1,4 +1,4 @@ | |||||
| <template> | |||||
| <!-- <template> | |||||
| <div class="Box"> | <div class="Box"> | ||||
| <div class="title">遂芒科技</div> | <div class="title">遂芒科技</div> | ||||
| <div class="cont"> | <div class="cont"> | ||||
| @@ -128,4 +128,4 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||
| --> | |||||
| @@ -14,7 +14,8 @@ | |||||
| </div> | </div> | ||||
| <div class="module_1"> | <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="titleBox" @click="goLogin"> | ||||
| <div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> | <div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> | ||||
| <div class="title_item2" v-if="characters == 1">沉淀数字资产</div> | <div class="title_item2" v-if="characters == 1">沉淀数字资产</div> | ||||
| @@ -62,7 +63,7 @@ | |||||
| <div class="module_3" id="module_3"> | <div class="module_3" id="module_3"> | ||||
| <div class="imgBox1"> | <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> | ||||
| <!-- <div class="imgBox2"> | <!-- <div class="imgBox2"> | ||||
| <img src="../../assets/img/module_3_2.png" alt> | <img src="../../assets/img/module_3_2.png" alt> | ||||
| @@ -93,12 +94,12 @@ | |||||
| <img src="../../assets/img/module_3_1.png" alt> | <img src="../../assets/img/module_3_1.png" alt> | ||||
| </div>--> | </div>--> | ||||
| <div class="imgBox2"> | <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> | </div> | ||||
| <div class="module_5" id="module_5"> | <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="titleBox"> | ||||
| <div class="title"> | <div class="title"> | ||||
| {{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }} | {{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }} | ||||
| @@ -399,56 +400,56 @@ export default { | |||||
| dialogVisible: false, | dialogVisible: false, | ||||
| module_6_data: [ | 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: '教育', | ||||
| name_y: 'Education', | name_y: 'Education', | ||||
| des: '创新和丰富的学习体验', | des: '创新和丰富的学习体验', | ||||
| des_y: 'Innovative & richinng the learning experience' | 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: '金融', | ||||
| name_y: 'Finance', | name_y: 'Finance', | ||||
| des: '加强客户服务,通过新颖的互动方式与客户搭建沟通桥梁', | des: '加强客户服务,通过新颖的互动方式与客户搭建沟通桥梁', | ||||
| des_y: 'Enhance customer service, engage client relations through new innteravtive ways' | 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: ' 电商', | ||||
| name_y: 'E-commerce', | name_y: 'E-commerce', | ||||
| des: '7*24全天候数字员工线上销售和品牌推广', | des: '7*24全天候数字员工线上销售和品牌推广', | ||||
| des_y: '7*24 employee online selling & brands promotion' | 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: '零售与品牌', | ||||
| name_y: 'Retails', | name_y: 'Retails', | ||||
| des: '数字广告代言人以前所未有的方式打造品牌', | des: '数字广告代言人以前所未有的方式打造品牌', | ||||
| des_y: 'Branding in a different new way by digital Ads endorsers.' | 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: '技术服务', | ||||
| name_y: 'Avatar tech provider', | name_y: 'Avatar tech provider', | ||||
| des: '可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中', | des: '可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中', | ||||
| des_y: 'Provide all capability of avatar creation, manipulation & interactive of metavatar to deploy them in your own applications.' | 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: '娱乐', | ||||
| name_y: 'Entertaining', | name_y: 'Entertaining', | ||||
| des: '让您在元宇宙中拥有时尚靓丽的数字孪生', | des: '让您在元宇宙中拥有时尚靓丽的数字孪生', | ||||
| des_y: 'Exiciting etertaning experience by digital twins, stylishing the pictures & video, great looking avatars in metaverse.' | 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: '影视特效 ', | ||||
| name_y: 'Special Effects', | name_y: 'Special Effects', | ||||
| des: '通过Ai技术在电影特效中使用虚拟角色,极大的提高了效率,加强视觉效果', | des: '通过Ai技术在电影特效中使用虚拟角色,极大的提高了效率,加强视觉效果', | ||||
| des_y: 'A.I. technology for avatars deployed in movie special effects, great enhancement of effects production.' | 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: '公共服务', | ||||
| name_y: 'Public Sector', | name_y: 'Public Sector', | ||||
| des: '当人们需要帮助和助手时,数字公共服务人员24*7随时为您的繁重工作待命', | des: '当人们需要帮助和助手时,数字公共服务人员24*7随时为您的繁重工作待命', | ||||
| @@ -457,30 +458,30 @@ export default { | |||||
| ], | ], | ||||
| carouselLsit: [ | 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: [ | 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: [ | timeLsit: [ | ||||
| @@ -492,7 +493,7 @@ export default { | |||||
| // ctn2: "团队组建" | // ctn2: "团队组建" | ||||
| }, | }, | ||||
| { | { | ||||
| url: require('../../assets/img/carousel2.png'), | |||||
| url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel2.png', | |||||
| title: '2019', | title: '2019', | ||||
| ctn1_y: 'Deliver the first movie project in May. 2019', | ctn1_y: 'Deliver the first movie project in May. 2019', | ||||
| // ctn2_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: '项目交付' | ctn2: '项目交付' | ||||
| }, | }, | ||||
| { | { | ||||
| url: require('../../assets/img/carousel3.png'), | |||||
| url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
| title: '2021-05', | title: '2021-05', | ||||
| ctn1_y: 'Beta of MetaGene published in May,2021', | ctn1_y: 'Beta of MetaGene published in May,2021', | ||||
| // ctn2_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', | title: '2021-08', | ||||
| ctn1_y: 'Metavatar built up in Aug, 2021', | ctn1_y: 'Metavatar built up in Aug, 2021', | ||||
| // ctn2_y: "Metavatar built up in Aug, 2021", | // ctn2_y: "Metavatar built up in Aug, 2021", | ||||
| @@ -517,7 +518,7 @@ export default { | |||||
| // ctn2: "邃芒科技成立", | // ctn2: "邃芒科技成立", | ||||
| }, | }, | ||||
| { | { | ||||
| url: require('../../assets/img/carousel3.png'), | |||||
| url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
| title: '2022-01', | title: '2022-01', | ||||
| ctn1_y: 'Angel fund in Jan, 2022', | ctn1_y: 'Angel fund in Jan, 2022', | ||||
| // ctn2_y: "Angel fund in Jan, 2022", | // ctn2_y: "Angel fund in Jan, 2022", | ||||
| @@ -525,7 +526,7 @@ export default { | |||||
| // ctn2: "获得天使轮融资", | // ctn2: "获得天使轮融资", | ||||
| }, | }, | ||||
| { | { | ||||
| url: require('../../assets/img/carousel3.png'), | |||||
| url: 'https://suimang.oss-cn-beijing.aliyuncs.com/builtin/static/wap/carousel3.png', | |||||
| title: '2022-06', | title: '2022-06', | ||||
| ctn1_y: 'Deliver the first project based on Magenta for our strategic partner in Jun,2022', | 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", | // 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', | name: 'aboutUs', | ||||
| component: () => import("../components/aboutUs/aboutUs"), | component: () => import("../components/aboutUs/aboutUs"), | ||||
| }, | }, | ||||
| { | |||||
| path: '/styleAdd', | |||||
| name: 'styleAdd', | |||||
| component: () => import("../components/styleAdd/styleAdd"), | |||||
| }, | |||||
| // 登录 | // 登录 | ||||
| { | { | ||||
| path: '/login', | path: '/login', | ||||
| @@ -36,8 +36,8 @@ | |||||
| <!-- 渐变遮罩层 --> | <!-- 渐变遮罩层 --> | ||||
| <div class="waterFall-item-mask"> | <div class="waterFall-item-mask"> | ||||
| <div>{{ item.title || '无标题' }}</div> | <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>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | ||||
| </div> | </div> | ||||
| <!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功--> | <!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功--> | ||||
| @@ -71,8 +71,10 @@ | |||||
| <div v-if="videoList.length > 0" class="videoModel" :key="index"> | <div v-if="videoList.length > 0" class="videoModel" :key="index"> | ||||
| <!-- 左侧图片 --> | <!-- 左侧图片 --> | ||||
| <div class="videoPrv" @click="goDetail(item)"> | <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 == 1" class="cover">视频生成中</div> | ||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | ||||
| <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | ||||
| @@ -166,8 +168,10 @@ export default { | |||||
| pageSize: 6, | pageSize: 6, | ||||
| prePage: '', | prePage: '', | ||||
| total: '', | 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 // 显示列表样式 | listActive: 1 // 显示列表样式 | ||||
| }; | }; | ||||
| }, | }, | ||||
| @@ -512,8 +516,9 @@ export default { | |||||
| // background-color: #979797; | // background-color: #979797; | ||||
| img { | img { | ||||
| position: absolute; | position: absolute; | ||||
| top: 25px; | |||||
| width: 140px; | width: 140px; | ||||
| height: 100px; | |||||
| height: 50px; | |||||
| border-radius: 6px; | border-radius: 6px; | ||||
| } | } | ||||
| .cover { | .cover { | ||||
| @@ -533,6 +538,7 @@ export default { | |||||
| white-space: nowrap; | white-space: nowrap; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| margin-top: 10px; | |||||
| .videoName { | .videoName { | ||||
| width: 100%; | width: 100%; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| @@ -748,6 +754,8 @@ export default { | |||||
| position: relative; | position: relative; | ||||
| border-radius: 12px; | border-radius: 12px; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| // min-width: 200px; | |||||
| min-height: 100px; | |||||
| } | } | ||||
| img { | img { | ||||
| max-width: 100%; | max-width: 100%; | ||||
| @@ -760,7 +768,7 @@ export default { | |||||
| left: 0; | left: 0; | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| justify-content: space-around; | |||||
| justify-content: flex-end; | |||||
| padding: 5px 8px 5px; | padding: 5px 8px 5px; | ||||
| background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); | background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); | ||||
| height: 80px; | height: 80px; | ||||
| @@ -770,6 +778,7 @@ export default { | |||||
| overflow: hidden; | overflow: hidden; | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| margin-bottom: 3px; | |||||
| } | } | ||||
| } | } | ||||
| &-state { | &-state { | ||||
| @@ -1,5 +1,6 @@ | |||||
| // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | // 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 path = require('path'); | ||||
| const resolve = dir => { | const resolve = dir => { | ||||
| return path.join(__dirname, dir) | return path.join(__dirname, dir) | ||||
| @@ -19,8 +20,8 @@ if (isProduction) { | |||||
| 'vue': 'Vue', | 'vue': 'Vue', | ||||
| 'vant': 'vant', | 'vant': 'vant', | ||||
| 'element-ui': 'ELEMENT', | 'element-ui': 'ELEMENT', | ||||
| 'vuex': 'Vuex', | |||||
| 'vue-router': 'VueRouter', | |||||
| // 'vuex': 'Vuex', | |||||
| // 'vue-router': 'VueRouter', | |||||
| } | } | ||||
| cdn = { | cdn = { | ||||
| css: [ | css: [ | ||||
| @@ -28,11 +29,11 @@ if (isProduction) { | |||||
| ], | ], | ||||
| js: [ | js: [ | ||||
| // vue must at first! | // 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'; | args[0].favicon = './public/favicon.ico'; | ||||
| return args; | return args; | ||||
| }); | }); | ||||
| // 注入cdn变量 (打包时会执行) | // 注入cdn变量 (打包时会执行) | ||||
| config.plugin('html').tap(args => { | config.plugin('html').tap(args => { | ||||
| args[0].cdn = cdn // 配置cdn给插件 | args[0].cdn = cdn // 配置cdn给插件 | ||||
| return args | 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: | image-webpack-loader@^8.1.0: | ||||
| version "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== | integrity sha512-bxzMIBNu42KGo6Bc9YMB0QEUt+XuVTl2ZSX3oGAlbsqYOkxkT4TEWvVsnwUkCRCYISJrMCEc/s0y8OYrmEfUOg== | ||||
| dependencies: | dependencies: | ||||
| imagemin "^7.0.1" | imagemin "^7.0.1" | ||||