浏览代码

字体

master
congzc 1年前
父节点
当前提交
3e62abd65d
共有 21 个文件被更改,包括 150 次插入138 次删除
  1. +9
    -3
      public/index.html
  2. +4
    -4
      src/api/login.js
  3. 二进制
      src/assets/fonts/Alimama_ShuHeiTi_Bold.ttf
  4. 二进制
      src/assets/fonts/Alimama_ShuHeiTi_Bold.woff
  5. 二进制
      src/assets/fonts/Alimama_ShuHeiTi_Bold.woff2
  6. 二进制
      src/assets/fonts/DingTalk_JinBuTi_Regular.ttf
  7. 二进制
      src/assets/fonts/DingTalk_JinBuTi_Regular.woff
  8. 二进制
      src/assets/fonts/DingTalk_JinBuTi_Regular.woff2
  9. 二进制
      src/assets/fonts/Smiley_Sans_Oblique_斜体.otf
  10. 二进制
      src/assets/fonts/Smiley_Sans_Oblique_斜体.ttf
  11. 二进制
      src/assets/fonts/Smiley_Sans_Oblique_斜体.woff
  12. 二进制
      src/assets/fonts/Smiley_Sans_Oblique_斜体.woff2
  13. 二进制
      src/assets/icon/icon-loading.png
  14. 二进制
      src/assets/logo.png
  15. +2
    -2
      src/components/CutImg.vue
  16. +54
    -114
      src/components/editPosition.vue
  17. +2
    -2
      src/components/home/home.vue
  18. +23
    -0
      src/styles/index.scss
  19. +2
    -2
      src/utils/request.js
  20. +50
    -7
      src/views/login/login.vue
  21. +4
    -4
      src/views/model/editModel.vue

+ 9
- 3
public/index.html 查看文件

@@ -9,10 +9,12 @@

<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<!-- <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css">
<script src="http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js"></script>
@@ -27,4 +29,8 @@
<div id="app"></div>
</body>

</html>
</html>
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->

<!-- <link rel="icon" href="/favicon.ico" type="image/x-icon" /> -->
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->

+ 4
- 4
src/api/login.js 查看文件

@@ -123,7 +123,7 @@ export function doLoginOut() {
* @description 获取图形验证码
* @returns data
*/
// export const doCodeImg =
// 'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg'
export const doCodeImg =
'http://m.metavatar.cc/C/api/user/captcha.jpg'
export const doCodeImg =
'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg'
// export const doCodeImg =
// 'http://m.metavatar.cc/C/api/user/captcha.jpg'

二进制
src/assets/fonts/Alimama_ShuHeiTi_Bold.ttf 查看文件


二进制
src/assets/fonts/Alimama_ShuHeiTi_Bold.woff 查看文件


二进制
src/assets/fonts/Alimama_ShuHeiTi_Bold.woff2 查看文件


二进制
src/assets/fonts/DingTalk_JinBuTi_Regular.ttf 查看文件


二进制
src/assets/fonts/DingTalk_JinBuTi_Regular.woff 查看文件


二进制
src/assets/fonts/DingTalk_JinBuTi_Regular.woff2 查看文件


二进制
src/assets/fonts/Smiley_Sans_Oblique_斜体.otf 查看文件


二进制
src/assets/fonts/Smiley_Sans_Oblique_斜体.ttf 查看文件


二进制
src/assets/fonts/Smiley_Sans_Oblique_斜体.woff 查看文件


二进制
src/assets/fonts/Smiley_Sans_Oblique_斜体.woff2 查看文件


二进制
src/assets/icon/icon-loading.png 查看文件

之前 之后
宽度: 200  |  高度: 200  |  大小: 4.3 KiB

二进制
src/assets/logo.png 查看文件

之前 之后
宽度: 200  |  高度: 200  |  大小: 6.7 KiB

+ 2
- 2
src/components/CutImg.vue 查看文件

@@ -173,8 +173,8 @@ export default {
that
.$axios({
method: 'post',
// url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`,
url: `http://m.metavatar.cc/C/api/upload/awsImgUpload`,
url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`,
// url: `http://m.metavatar.cc/C/api/upload/awsImgUpload`,
headers: {
'content-type': 'multipart/form-data',
token: AccessToken,


+ 54
- 114
src/components/editPosition.vue 查看文件

@@ -1,10 +1,5 @@
<template>
<div
v-if="proportion"
:class="inPage ? 'page active' : 'page'"
id="pageBody"
@touchstart="globalClick"
>
<div v-if="proportion" :class="inPage ? 'page active' : 'page'" id="pageBody" @touchstart="globalClick">
<div class="content" :style="bgStyle" ref="fatherBox">
<!-- 控制框 -->
<!-- <div class="control">
@@ -27,38 +22,20 @@
transform: 'scale(' + item.w / proportion + ') ',
zIndex: item.z,
top: item.y / proportion + 'px',
left: item.x / proportion + 'px',
}"
>
left: item.x / proportion + 'px'
}">
<div id="itemText">{{ item.text }}</div>
<img id="itemImg" :src="item.material" alt="" />
<!-- 边框 -->
<div id="itemBorder" :class="domIndex == index ? 'active' : ''"></div>

<div
v-if="domIndex == index"
id="itemDelete"
class="itemDelete"
@touchstart="delItem(index)"
>
<div v-if="domIndex == index" id="itemDelete" class="itemDelete" @touchstart="delItem(index)">
<img id="itemDelete" src="../assets/icon/delete.png" alt="" />
</div>

<div
v-if="domIndex == index"
id="iCircle"
class="outSide"
@touchmove="scaleMovingMaterial(index)"
@touchstart="scaleStartMaterial"
@touchend="scaleEndMaterial"
>
<div v-if="domIndex == index" id="iCircle" class="outSide" @touchmove="scaleMovingMaterial(index)" @touchstart="scaleStartMaterial" @touchend="scaleEndMaterial">
<div id="iCircle" class="circle bottomRight">
<img
id="iCircle"
class="sacleIcon"
src="../assets/icon/Scale.png"
alt=""
/>
<img id="iCircle" class="sacleIcon" src="../assets/icon/Scale.png" alt="" />
</div>
</div>
</div>
@@ -75,28 +52,15 @@
transform: 'scale(' + materialList.virtual.w / proportion + ') ',
zIndex: materialList.virtual.z,
top: materialList.virtual.y / proportion + 'px',
left: materialList.virtual.x / proportion + 'px',
}"
>
left: materialList.virtual.x / proportion + 'px'
}">
<!-- <div>{{ item.text }}</div> -->
<img id="virtualImg" :src="materialList.virtual.material" alt="" />
<!-- 边框 -->
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> -->
<div
v-if="isFcous"
id="circle"
class="outSide"
@touchmove="scaleMovingVirtual"
@touchstart="scaleStartVirtual"
@touchend="scaleEndVirtual"
>
<div v-if="isFcous" id="circle" class="outSide" @touchmove="scaleMovingVirtual" @touchstart="scaleStartVirtual" @touchend="scaleEndVirtual">
<div id="circle" class="circle bottomRight">
<img
id="circle"
class="sacleIcon"
src="../assets/icon/Scale.png"
alt=""
/>
<img id="circle" class="sacleIcon" src="../assets/icon/Scale.png" alt="" />
</div>
</div>
</div>
@@ -106,29 +70,29 @@

<script>
// 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import Vue from 'vue';
import { Toast } from 'vant';
import { mapState, mapActions } from 'vuex';
// 工具
import { scrollToID } from "../utils";
import { scrollToID } from '../utils';

Vue.use(Toast);
export default {
props: {
imgUrl: {
default: false,
default: false
// type: String
},
materialList: {
default: false,
type: Object,
type: Object
},
videoType: {
default: false,
default: false
},
proportion: {
default: false,
},
default: false
}
},
data() {
return {
@@ -143,16 +107,16 @@ export default {
scale: 1,
domIndex: -1, //当前点击的图片
domIndex1: -1, //当前点击的数字人
transformOrigin: "top left",
transformOrigin: 'top left',
touchStart: {},
isFcous: false,
scaleNum: 0.015, // 缩放系数,数值越大缩放灵敏度越高,反之亦然
scaleNum: 0.003 // 缩放系数,数值越大缩放灵敏度越高,反之亦然
};
},

computed: {
...mapState({
characters: (state) => state.publicObj.characters,
characters: state => state.publicObj.characters,
//动态计算样式
bgStyle() {
return {
@@ -160,31 +124,25 @@ export default {
// height: '1920px',
// transform: 'scale(0.2)',
backgroundImage: `url(${this.materialList.BGI.material})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundSize: 'cover',
backgroundPosition: 'center'
};
},
}),
}
})
},

methods: {
...mapActions(["setCharacters"]),
...mapActions(['setCharacters']),
// 组件
globalClick(e) {
console.log(e.target.id);
// 当点击区域不是数字人时,取消数字人的聚焦框
if (
!(
e.target.id == "virtual" ||
e.target.id == "virtualImg" ||
e.target.id == "circle"
)
) {
if (!(e.target.id == 'virtual' || e.target.id == 'virtualImg' || e.target.id == 'circle')) {
this.isFcous = false;
}

// 当点击区域不是素材时,取消素材的聚焦框
if (e.target.id[0] != "i") {
if (e.target.id[0] != 'i') {
this.domIndex = -2;
}
},
@@ -196,10 +154,7 @@ export default {
this.domIndex = index;
//双指缩放初始化
if (event.touches[1]) {
this.startDistance = this.getDistance(
event.touches[0],
event.touches[1]
);
this.startDistance = this.getDistance(event.touches[0], event.touches[1]);
}
// 记录点击瞬间的鼠标坐标
this.startX = event.touches[0].clientX;
@@ -216,7 +171,7 @@ export default {
event.preventDefault();
if (!this.dragging) return;
if (this.domIndex != index) return;
if (event.target.id == "iCircle") return;
if (event.target.id == 'iCircle') return;
// console.log(event.touches[0])

// 双指缩放
@@ -238,9 +193,7 @@ export default {
// 得到父子盒子信息
const fatherRect = this.$refs.fatherBox.getBoundingClientRect();
// 子盒子信息
const sonRect = document
.getElementById(`item${index}`)
.getBoundingClientRect();
const sonRect = document.getElementById(`item${index}`).getBoundingClientRect();
// 限制X轴
// console.log(fatherRect)
// console.log(sonRect)
@@ -264,7 +217,7 @@ export default {
},

delItem(index) {
console.log(index, "index");
console.log(index, 'index');
this.materialList.scList.splice(index, 1);
},

@@ -276,10 +229,7 @@ export default {
this.dragging = true;
//双指缩放初始化
if (event.touches[1]) {
this.startDistance = this.getDistance(
event.touches[0],
event.touches[1]
);
this.startDistance = this.getDistance(event.touches[0], event.touches[1]);
}
// 记录点击瞬间的鼠标坐标
this.startX = event.touches[0].clientX;
@@ -289,11 +239,7 @@ export default {
virtualTouchUp() {
this.dragging = false;
this.startDistance = 0;
console.log(
this.materialList.virtual.x,
this.materialList.virtual.y,
"position now"
);
console.log(this.materialList.virtual.x, this.materialList.virtual.y, 'position now');
// Toast.success(
// this.materialList.virtual.x + "," + this.materialList.virtual.y
// );
@@ -301,7 +247,7 @@ export default {
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
virtualTouchMoving(e) {
// 右下角缩放
if (e.target.id == "circle") return;
if (e.target.id == 'circle') return;
// 禁止默认事件--下拉
event.preventDefault();
if (!this.dragging) return;
@@ -317,9 +263,7 @@ export default {
// 得到父子盒子信息
const fatherRect = this.$refs.fatherBox.getBoundingClientRect();
// 子盒子信息
const sonRect = document
.getElementById(`virtual`)
.getBoundingClientRect();
const sonRect = document.getElementById(`virtual`).getBoundingClientRect();

const deltaX = event.touches[0].clientX - this.startX;
const deltaY = event.touches[0].clientY - this.startY;
@@ -354,7 +298,7 @@ export default {
// 控制台
controlImg(type) {
if (this.domIndex == -1) {
Toast("请选择素材");
Toast('请选择素材');
return;
}
if (type == 1) {
@@ -396,7 +340,7 @@ export default {
},
// 素材超出显示范围
exceed() {
Toast("素材超出显示范围");
Toast('素材超出显示范围');
},

scaleMovingMaterial(index) {
@@ -408,7 +352,7 @@ export default {

// 变化大小,true为变小,false为变大
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false;
console.log(flag, "flag");
console.log(flag, 'flag');
console.log(this.proportion);
if (!flag) {
// 限制最大缩放系数
@@ -417,7 +361,7 @@ export default {
// 更新坐标位置
this.touchStart = {
pageX: x,
pageY: y,
pageY: y
};
} else {
// 限制最小缩放系数
@@ -426,7 +370,7 @@ export default {
// 更新坐标位置
this.touchStart = {
pageX: x,
pageY: y,
pageY: y
};
}
},
@@ -436,9 +380,9 @@ export default {
const y = e.changedTouches[0].clientY;
this.touchStart = {
pageX: x,
pageY: y,
pageY: y
};
console.log(this.touchStart, "touchStart");
console.log(this.touchStart, 'touchStart');
},

scaleEndMaterial(e) {},
@@ -451,7 +395,7 @@ export default {

// 变化大小,true为变小,false为变大
const flag = Math.sign(x - this.touchStart.pageX) == -1 ? true : false;
console.log(flag, "flag");
console.log(flag, 'flag');
console.log(this.proportion);
if (!flag) {
// 限制最大缩放系数
@@ -460,7 +404,7 @@ export default {
// 更新坐标位置
this.touchStart = {
pageX: x,
pageY: y,
pageY: y
};
} else {
// 限制最小缩放系数
@@ -469,7 +413,7 @@ export default {
// 更新坐标位置
this.touchStart = {
pageX: x,
pageY: y,
pageY: y
};
}
},
@@ -479,13 +423,13 @@ export default {
const y = e.changedTouches[0].clientY;
this.touchStart = {
pageX: x,
pageY: y,
pageY: y
};
console.log(this.touchStart, "touchStart");
console.log(this.touchStart, 'touchStart');
},

scaleEndVirtual(e) {
console.log(this.materialList.virtual.w, "w");
console.log(this.materialList.virtual.w, 'w');
},

// 计算双指距离
@@ -496,7 +440,7 @@ export default {
},
go(url) {
this.$router.push(url);
},
}
},
watch: {
// proportion(newValue) {
@@ -506,16 +450,12 @@ export default {
created() {},
mounted() {
this.inPage = true;
scrollToID("top");
console.log(
this.materialList.virtual.x,
this.materialList.virtual.y,
"position now"
);
scrollToID('top');
console.log(this.materialList.virtual.x, this.materialList.virtual.y, 'position now');
// const elementWidth = document.getElementById('pageBody').clientHeight
// this.proportionSon = elementWidth / 1080
// console.log(elementWidth)
},
}
};
</script>



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

@@ -543,8 +543,8 @@ export default {
if (AccessToken) {
this.$axios({
method: 'get',
// url: `https://smapitest.malls.iformall.com/C/api/userVideo/list?pageNum=1&pageSize=3`,
url: `http://m.metavatar.cc/C/api/userVideo/list?pageNum=1&pageSize=3`,
url: `https://smapitest.malls.iformall.com/C/api/userVideo/list?pageNum=1&pageSize=3`,
// url: `http://m.metavatar.cc/C/api/userVideo/list?pageNum=1&pageSize=3`,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
token: AccessToken


+ 23
- 0
src/styles/index.scss 查看文件

@@ -53,3 +53,26 @@ p {
transform: translate(-50%, -50%);
}

// 字体导入
@font-face {
font-family: "ALi Regular";
src:
// 数黑体
url("../assets/fonts/Alimama_ShuHeiTi_Bold.woff2") format("woff2"),
// url("../assets/fonts/Alimama_ShuHeiTi_Bold.woff") format("woff"),
// url("../assets/fonts/Alimama_ShuHeiTi_Bold.ttf") format("ttf"),
//进步体
// url("../assets/fonts/DingTalk_JinBuTi_Regular.woff2") format("woff2"),
// url("../assets/fonts/DingTalk_JinBuTi_Regular.woff") format("woff"),
// url("../assets/fonts/DingTalk_JinBuTi_Regular.ttf") format("ttf"),
//得意黑
// url("../assets/fonts/Smiley_Sans_Oblique_斜体.woff2") format("woff2"),
// url("../assets/fonts/Smiley_Sans_Oblique_斜体.woff") format("woff"),
// url("../assets/fonts/Smiley_Sans_Oblique_斜体.otf") format("otf"),
// url("../assets/fonts/Smiley_Sans_Oblique_斜体.ttf") format("ttf"),
}

* {
font-family: "ALi Regular","Heiti", "Simsun", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


+ 2
- 2
src/utils/request.js 查看文件

@@ -3,8 +3,8 @@ import router from '@/router'
import { Toast } from 'vant'

// 基础地址
// const baseURL = 'https://smapitest.malls.iformall.com/C' //测试环境
const baseURL = 'http://m.metavatar.cc/C' //正式环境
const baseURL = 'https://smapitest.malls.iformall.com/C' //测试环境
// const baseURL = 'http://m.metavatar.cc/C' //正式环境

/**
* @description:发送Axios请求


+ 50
- 7
src/views/login/login.vue 查看文件

@@ -38,7 +38,7 @@
</div>
<!-- 登录 -->
<el-form-item>
<el-button class="submitBtn" @click="loginByPhoneCode">登录/注册</el-button>
<el-button class="submitBtn" @click="loginByPhoneCode">登录</el-button>
</el-form-item>
<!-- 没有账号 -->
<div>
@@ -174,9 +174,10 @@
</el-form-item>
</el-form>
</div>
<!-- <van-toast v-model="showToast" ref="myToast">请稍后...</van-toast> -->
<!-- 弹出层 -->
<van-popup v-model="showDialog">内容</van-popup>
<!-- 加载状态 -->
<div class="loadingBox" v-show="showToast">
<img src="../../assets/icon/icon-loading.png" alt="" />
</div>
</div>
</template>

@@ -194,7 +195,7 @@ Vue.use(Toast);
export default {
data() {
return {
showToast: true,
showToast: false,
showDialog: false, //弹出层状态
countNum: 60, // 倒计时
countdownState: false, //倒计时状态
@@ -424,24 +425,30 @@ export default {
// 忘记密码第一步,根据图片验证码和手机号获取短信
async sendPhoneCode(data) {
try {
this.showToast = true;
const res = await doSendPhoneCode(data);
console.log(res);
this.loginType = 4;
this.showToast = false;
} catch (error) {
console.log(error, 'error');
Toast.fail(error.message);
this.showToast = false;
}
},
// 忘记密码第二部,提交验证码和新密码
async updPass(data) {
try {
this.showToast = true;
const res = await doUpdPass(data);
console.log(res);
Toast.success('修改密码成功');
this.loginType = 1;
this.showToast = false;
} catch (error) {
console.log(error, 'error');
Toast.fail(error.message);
this.showToast = false;
}
},
// 提交邀请码
@@ -481,27 +488,32 @@ export default {
try {
//密码登录
if (this.loginType == 1) {
this.showToast = true;
const res = await doLogin(loginParams);
console.log(res.data.token, '登录数据');
const token = res.data.token;
// 将token置入本地存储
localStorage.setItem('AccessToken', token);
// 查询有无邀请码
this.checkInviteCode();
await this.checkInviteCode();
this.showToast = false;
}
// 短信登录
if (this.loginType == 2) {
this.showToast = true;
const res = await doLoginByPhone(loginParams);
console.log(res, '登录数据');
const token = res.data.token;
// 将token置入本地存储
localStorage.setItem('AccessToken', token);
// 查询有无邀请码
this.checkInviteCode();
await this.checkInviteCode();
this.showToast = false;
}
} catch (error) {
console.log(error, 'error');
Toast.fail(error.message);
this.showToast = false;
}
},

@@ -561,6 +573,37 @@ export default {
</script>

<style lang="scss" scoped>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loadingBox {
position: absolute;
padding: 1px;
top: 0;
left: 0;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
background-color: #4a4a4b;
opacity: 0.7;
img {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
width: 20%;

transform-origin: center;
animation: rotate 1s linear infinite;
}
}
.shuaxin {
margin-left: 10px;
font-size: 25px;


+ 4
- 4
src/views/model/editModel.vue 查看文件

@@ -118,7 +118,7 @@
<!-- 合成视频进度条 -->
<div v-if="showSynthesisDialog" class="synthesisDialog" @touchmove.prevent="noScroll">
<div class="synthesisDialog-in">
<van-progress :percentage="percentageData" color="#7264F5" define-back-color="#f0effe" stroke-width="12" class="progress" />
<van-progress :percentage="percentageData" color="#5bd9e0" define-back-color="#f0effe" stroke-width="12" class="progress" />
<div class="synthesisDialog-text">正在生成视频,请耐心等待!</div>
<van-button type="default" @click="$router.push('/myPage')">回到主页</van-button>
</div>
@@ -561,7 +561,7 @@ export default {
console.log(data, '最终提交的参数');
if (type == 1) {
Toast.loading({
duration: 5000,
duration: 3000,
message: '加载中...',
forbidClick: true
});
@@ -994,10 +994,10 @@ export default {
transform: translateX(-50%);
margin-top: 10px;
width: 225px;
height: 50px;
height: 40px;
text-align: center;
font-size: 20px;
line-height: 50px;
// line-height: 30px;
border: 1px solid #85a5f9;
.img {
margin-top: -3px;


正在加载...
取消
保存