Browse Source

多人和录音

master
congzc 1 year ago
parent
commit
c3d4f95d38
10 changed files with 718 additions and 160 deletions
  1. BIN
      src/assets/icon/sound-2.png
  2. BIN
      src/assets/icon/sound.png
  3. BIN
      src/assets/icon/soundBG.png
  4. +2
    -1
      src/pages.json
  5. +161
    -0
      src/pages/closeStyle/closeStyle copy.vue
  6. +24
    -27
      src/pages/closeStyle/closeStyle.vue
  7. +86
    -37
      src/pages/closeStyle/multiplayer.vue
  8. +288
    -0
      src/pages/recorded/index copy.vue
  9. +156
    -95
      src/pages/recorded/index.vue
  10. +1
    -0
      src/pages/uploadPhoto/uploadPhoto.vue

BIN
src/assets/icon/sound-2.png View File

Before After
Width: 52  |  Height: 40  |  Size: 429 B

BIN
src/assets/icon/sound.png View File

Before After
Width: 109  |  Height: 83  |  Size: 1.1 KiB

BIN
src/assets/icon/soundBG.png View File

Before After
Width: 520  |  Height: 173  |  Size: 6.5 KiB

+ 2
- 1
src/pages.json View File

@@ -33,7 +33,8 @@
{
"path": "pages/closeStyle/closeStyle",
"style": {
"navigationBarTitleText": "选择风格"
"navigationBarTitleText": "选择风格",
"enablePullDownRefresh": true
}
},
{


+ 161
- 0
src/pages/closeStyle/closeStyle copy.vue View File

@@ -0,0 +1,161 @@
<template>
<div class="page">
<u-list class="styleListBox" @scrolltolower="scrolltolower">
<u-list-item class="glodYBox">
<u-list-item
v-for="item in styleList"
:key="item.id"
class="styleListBoxItme"
>
<view class="styleInfo" @click="createPhoto(item.id)">
<image :src="item.coverImg" mode="aspectFit" />
<text class="name">{{ item.title }}</text>
<text class="single">{{ peopleNum(item.mouldType) }}</text>
</view>
</u-list-item>
</u-list-item>
</u-list>
</div>
</template>

<script setup>
//#region 导入
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { getListApi } from "../../api/closeStyle";
//#endregion

//#region 下拉刷新
onPullDownRefresh(async () => {
uni.showLoading({
title: "加载中...",
mask: true,
});
pageNum.value = 1;
pageSize.value = 8;
styleList.value = [];
await getList();
uni.hideLoading();
uni.stopPullDownRefresh();
});
//#endregion

//#region 列表加载
const pageNum = ref(1);
const pageSize = ref(8);
const styleList = ref([]);
// 得到列表
async function getList() {
try {
const res = await getListApi(pageNum.value, pageSize.value);
styleList.value = res.data.list;
} catch (error) {
uni.showToast({
title: "获取列表失败,请重试",
icon: "none",
});
}
}
getList();
// 触底加载更多
const scrolltolower = async () => {
try {
pageNum.value += 1;
const res = await getListApi(pageNum.value, pageSize.value);
if (res.data.list.length == 0) {
pageNum.value -= 1;
uni.showToast({
title: "已加载全部内容",
icon: "none",
});
}
styleList.value.push(...res.data.list);
} catch (error) {
uni.showToast({
title: "获取数据失败,请重试",
icon: "none",
});
}
};

// 处理单人双人多人
function peopleNum(num) {
if (num == 1) {
return "单人";
} else if (num == 2) {
return "双人";
} else if (num == 3) {
return "三人";
}
}
//#endregion ---------------------

//#region 点击图片
function createPhoto(id) {
uni.navigateTo({
url: `/pages/closeStyle/goCreatePhoto?id=${id}`,
});
}
//#endregion ---------------------
</script>

<style lang="scss">
.page {
height: 100vh;
overflow: hidden;
background-color: #222527;
}
.u-list {
width: 650rpx;

.glodYBox {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
.u-list-item {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
.styleInfo {
position: relative;
display: flex !important;
flex-wrap: wrap !important;
width: 300rpx;
height: 480rpx;
margin-bottom: 50rpx;
border-radius: 24rpx;
overflow: hidden;
image {
width: 300rpx;
height: 400rpx;
}
.name {
background-color: #393b3d;
width: 100%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 30rpx;
font-weight: bold;
}
.single {
position: absolute;
top: 11rpx;
right: 13rpx;
width: 72rpx;
height: 41rpx;
text-align: center;
line-height: 41rpx;
background: rgba(0, 0, 0, 0.4);
font-size: 22rpx;
// opacity: 0.4;
border-radius: 12rpx;
}
}
}
</style>

+ 24
- 27
src/pages/closeStyle/closeStyle.vue View File

@@ -20,14 +20,30 @@

<script setup>
//#region 导入
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { getListApi } from "../../api/closeStyle";
//#endregion

//#region 页面下拉刷新
// onPullDownRefresh(async () => {
// uni.showLoading({
// title: "加载中...",
// mask: true,
// });
// pageNum.value = 1;
// pageSize.value = 8;
// styleList.value = [];
// await getList();
// uni.hideLoading();
// uni.stopPullDownRefresh();
// });
//#endregion

//#region 列表加载
const pageNum = ref(1);
const pageSize = ref(6);
const pageSize = ref(8);
const styleList = ref([]);
// 得到列表
async function getList() {
@@ -45,8 +61,14 @@ getList();
// 触底加载更多
const scrolltolower = async () => {
try {
uni.showLoading({
title: "加载中...",
mask: true,
});
pageNum.value += 1;
const res = await getListApi(pageNum.value, pageSize.value);
styleList.value.push(...res.data.list);
uni.hideLoading();
if (res.data.list.length == 0) {
pageNum.value -= 1;
uni.showToast({
@@ -54,8 +76,8 @@ const scrolltolower = async () => {
icon: "none",
});
}
styleList.value.push(...res.data.list);
} catch (error) {
uni.hideLoading();
uni.showToast({
title: "获取数据失败,请重试",
icon: "none",
@@ -85,31 +107,6 @@ function createPhoto(id) {
</script>

<style lang="scss">
// scroll-view {
// width: 750rpx;
// }
// .uni-scroll-view-content {
// width: 750rpx;
// display: flex !important;
// flex-direction: row !important;
// flex-wrap: wrap !important;
// justify-content: space-between !important;
// .styleInfo {
// width: 350rpx;
// height: 400rpx;
// margin-bottom: 50rpx;
// image {
// width: 350rpx;
// height: 350rpx;
// }
// text {
// width: 100%;
// height: 50rpx;
// text-align: center;
// line-height: 50rpx;
// }
// }
// }
.page {
background-color: #222527;
}


+ 86
- 37
src/pages/closeStyle/multiplayer.vue View File

@@ -58,13 +58,14 @@
>
</view>
<image
v-if="styleData.mouldType == 3"
@click="swapItems2"
class="exchange"
src="../../assets/icon/exchange.png"
mode="scaleToFill"
/>
<!-- 图三 -->
<view class="imgBoxItem">
<view v-if="styleData.mouldType == 3" class="imgBoxItem">
<image class="avatar" :src="avatarList[2].url" mode="aspectFill" />
<view v-if="!avatarList[2].url" class="noUrlBox" @click="chooseImg(2)"
>+</view
@@ -121,7 +122,8 @@ const styleData = ref({});
onLoad((options) => {
// styleId.value = options.id;
// styleId.value = "857147862095679488";
styleId.value = "245";
styleId.value = "2003";
// styleId.value = "246";
getInfo();
// getMyCoin();
});
@@ -180,7 +182,7 @@ function swapItems2() {
avatarList.value[1] = avatarList.value[2];
avatarList.value[2] = temp;
}
// 打开图片选择
// 打开图片选择,包含了百度检测人脸检测和上传图片
function chooseImg(index) {
uni.chooseImage({
count: 1,
@@ -210,40 +212,74 @@ function chooseImg(index) {
icon: "none",
});
return;
}
// 人脸识别接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api
filePath: res.tempFilePaths[0],
name: "file",
formData: {
user: "test",
},
header: {
// Authorization: userInfoModulesPinia.token,
token: userInfoModulesPinia.token,
},
success: (res3) => {
if (JSON.parse(res3.data).code != 200) {
} else {
// 人脸识别接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/userDigital/checkPhoto", //上传图片api
filePath: res.tempFilePaths[0],
name: "file",
formData: {
user: "test",
},
header: {
// Authorization: userInfoModulesPinia.token,
token: userInfoModulesPinia.token,
},
success: (res3) => {
if (JSON.parse(res3.data).code != 200) {
uni.hideLoading();
uni.showToast({
title: "图片不符合规范, 请重试",
icon: "none",
});
return;
} else {
// 上传接口
uni.uploadFile({
url: "https://test.metavatar.cc/C/api/upload/awsImgUpload", //上传图片api
filePath: res.tempFilePaths[0],
name: "file",
formData: {
user: "test",
},
header: {
"Content-Type": "multipart/form-data",
token: userInfoModulesPinia.token,
},
success: async (res4) => {
if (JSON.parse(res4.data).code != 200) {
uni.hideLoading();
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
return;
}
// 赋值
avatarList.value[index].url = JSON.parse(
res4.data
).data.url;
uni.hideLoading();
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
},
});
}
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: "图片不符合规范, 请重试",
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
return;
}
// 赋值
avatarList.value[index].url = res.tempFilePaths[0];
uni.hideLoading();
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: "网络被数字人偷走了, 请稍后重试",
icon: "none",
});
},
});
},
});
}
},
fail: (err) => {
console.error("选择图片失败", err);
@@ -272,20 +308,33 @@ function uploadImg(index) {}
//#region 生成写真照片
async function createing(id) {
try {
const res = await findImageApi();
console.log(res);
let myImg = res.data.image;
uni.showLoading({
title: "加载中...",
mask: true,
});
// const res = await findImageApi();
// console.log(res);
// let myImg = res.data.image;
let myImgList = [];
avatarList.value.forEach((item) => {
myImgList.push(item.url);
});
const data = {
digitalAvatarId: id,
userImages: JSON.stringify([myImg]),
userImages:
styleData.value.mouldType == 2
? JSON.stringify(myImgList.slice(0, 2))
: JSON.stringify(myImgList),
};
const res2 = await createPhotoApi(data);
console.log(res2);
uni.hideLoading();
uni.navigateTo({
url: `/pages/createing/index?id=${res2.data.id}`,
});
} catch (error) {
console.log(error);
uni.hideLoading();
uni.showToast({
title: "生成失败,请重试",
icon: "none",


+ 288
- 0
src/pages/recorded/index copy.vue View File

@@ -0,0 +1,288 @@
<template>
<view class="page" @touchmove.stop.prevent="">
<image src="../../assets/img/img1.png" mode="aspectFit" />
<view v-show="!audioUrl" class="myBtnbox">
<up-button
type="primary"
text="开始录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>

<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="试听"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="playVoice"
></up-button>
</view>

<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="重新录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>
<view class="myBtnbox">
<up-button
type="primary"
text="生成视频"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
</view>
<!-- 分享 -->
<view class="shareBox">
<view class="buttonBox">
<up-button
type="primary"
text="分享"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="邀请好友"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="购买金币"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
</view>
</view>
<!-- 弹出层 -->
<view class="popup" v-show="showPopup" @click.stop="showPopup = false">
<!-- 声纹图片 -->
<u-transition :show="showPopup">
<view class="transition wavyIcon">
<!-- <image src="../../assets/icon/u152.png" /> -->
</view>
</u-transition>

<!-- 底部框 -->
<u-transition
:show="showPopup"
@touchstart.stop="startRecord"
@touchend.stop="endRecord"
>
<view class="transition microphoneIcon">
<view class="mask"></view>
<image src="../../assets/icon/u149.png" mode="aspectFit" />
</view>
</u-transition>
</view>
</view>
</template>

<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
const userInfoModulesPinia = userInfoModules();

//#endregion

//#region 页面跳转
function bueCoin() {
uni.navigateTo({
url: "/pages/home/buyCoin",
});
}
//#endregion ---------------------

//#region 弹出层
const showPopup = ref(true);
function openPopup() {
showPopup.value = true;
}
function close() {
console.log("close");
}
function open() {
console.log("open");
}

//#endregion ---------------------

//#region 录音功能
let Recorder = null; //h5定义录音对象
let recorder = null; //h5定义录音实例
let recorderManager = null; //小程序定义录音实例
let innerAudioContext = null; //小程序定义mp3实例
const audioUrl = ref(null);
const audioRef = ref(null);

if (userInfoModulesPinia.platForm == 1) {
// 在 H5 平台导入 Recorder
import("js-audio-recorder").then((module) => {
const Recorder = module.default;
// 也可以继续使用 recorder 变量
const parameter = {
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
numChannels: 1, // 声道,支持 1 或 2, 默认是1
};
recorder = new Recorder(parameter);
});
} else {
recorderManager = uni.getRecorderManager();
innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
}
//#endregion

//#region 录音

function startRecord() {
if (userInfoModulesPinia.platForm != 1) {
console.log("开始录音xcx");
recorderManager.start({
// format: "mp3", // 录音的格式
duration: 60000, // 最大录音时长,单位毫秒
});
} else {
console.log("开始录音h5");
recorder.start();
}
}
async function endRecord() {
if (userInfoModulesPinia.platForm != 1) {
recorderManager.onStop((res) => {
console.log("录音结束xcx", res);
audioUrl.value = res.tempFilePath;
innerAudioContext.src = audioUrl.value;
});
recorderManager.stop();
} else {
console.log("录音结束h5");
await recorder.stop();
audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
}
showPopup.value = false;
}
async function playVoice() {
if (userInfoModulesPinia.platForm != 1) {
await innerAudioContext.play();
console.log("试听了xcx");
} else {
const link = document.createElement("audio");
link.src = audioUrl.value;
link.play();
console.log("试听了h5");
}
}
//#endregion ---------------------

//#region

//#endregion ---------------------
</script>

<style lang="scss">
.page {
position: relative;
}
image {
height: 650rpx;
}
.myBtnbox {
margin-top: 30rpx;
}
.shareBox {
margin-top: 250rpx;
width: 100%;
display: flex;
justify-content: space-between;
.buttonBox {
width: 30%;
}
}
.popup {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
.wavyIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 160rpx;
width: 50%;
background-color: #fff;
z-index: 3;

overflow: hidden;
image {
position: absolute;
left: -500rpx;
display: inline-block;
width: 1000rpx;
height: 160rpx;
z-index: 3;
// animation: moveImage 3s linear infinite;
}
@keyframes moveImage {
0% {
left: -100rpx;
}
50% {
left: -500rpx;
}
100% {
left: -100rpx;
}
}
}
.microphoneIcon {
position: absolute;
bottom: 0;
height: 500rpx;
width: 100%;
background-color: #fff;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mask {
position: absolute;
top: 40%;
left: 47%;
transform: translate(-50%, -50%);
width: 95rpx;
height: 95rpx;
transform: rotate(45deg);
z-index: 4;
background: url("../../assets/icon/u149.png");
}
image {
max-width: 0%;
max-height: 0%;
transform: rotate(45deg);
touch-action: none;
z-index: -1;
pointer-events: none;
}
// img {
// pointer-events: none;
// }
}
}
</style>

+ 156
- 95
src/pages/recorded/index.vue View File

@@ -1,75 +1,50 @@
<template>
<view class="page" @touchmove.stop.prevent="">
<image src="../../assets/img/img1.png" mode="aspectFit" />
<view v-show="!audioUrl" class="myBtnbox">
<up-button
type="primary"
text="开始录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>
<image class="modeImage" src="../../assets/img/img1.png" mode="aspectFit" />
<!-- 轮播图 -->
<!-- <u-swiper
indicator
indicatorMode="dot"
circular
:radius="30"
:autoplay="false"
:list="swiperList"
keyName="image"
@change="getSwiperIndex"
@click="previewImage"
></u-swiper> -->
<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="试听"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="playVoice"
></up-button>
</view>
<!-- 按钮部分 -->
<view v-show="!audioUrl" class="orangeBtn" @click="openPopup">
<image
src="../../assets/icon/sound-2.png"
mode="scaleToFill"
/>开始录音</view
>
<view v-show="audioUrl" class="myBtnbox">
<up-button
type="primary"
text="重新录音"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="openPopup"
></up-button>
</view>
<view class="myBtnbox">
<up-button
type="primary"
text="生成视频"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
<view v-show="audioUrl" class="orangeBtn transparentBtn" @click="playVoice"
><image src="../../assets/icon/sound-2.png" mode="scaleToFill" />试听
<view class="rerecord" @click.stop="openPopup">重新录音</view>
</view>
<!-- <view v-show="audioUrl" class="orangeBtn" @click="openPopup">重新录音</view> -->
<view class="orangeBtn" @click="">生成视频</view>
<!-- 分享 -->
<view class="shareBox">
<view class="buttonBox">
<up-button
type="primary"
text="分享"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="邀请好友"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click=""
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="购买金币"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
<view class="tips">
<text>邀请好友可获得2枚金币</text>
</view>
<view class="shareBtn" @click="">分享</view>
<view class="shareBtn" @click="">邀请好友 </view>
<view class="shareBtn" @click="">购买金币</view>
</view>
<!-- 弹出层 -->
<view class="popup" v-show="showPopup" @click.stop="showPopup = false">
<!-- 声纹图片 -->
<u-transition :show="showPopup">
<view class="transition wavyIcon">
<image src="../../assets/icon/u152.png" />
<image src="../../assets/icon/soundBG.png" />
</view>
</u-transition>
@@ -80,8 +55,7 @@
@touchend.stop="endRecord"
>
<view class="transition microphoneIcon">
<view class="mask"></view>
<image src="../../assets/icon/u149.png" mode="aspectFit" />
<image src="../../assets/icon/sound.png" mode="aspectFit" />
</view>
</u-transition>
</view>
@@ -91,12 +65,44 @@
<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
import { getPhotoListApi } from "../../api/lookPhoto.js";
const userInfoModulesPinia = userInfoModules();
//#endregion
//#region 轮播图
const swiperList = ref([]); //轮播图
async function getSwiperList() {
const res = await getPhotoListApi(workId.value);
console.log(res.data.photoList);
swiperList.value = res.data.photoList;
swiperList.value.forEach((item) => {
if (item.imageSuper) {
previewImageList.value.push(item.imageSuper);
} else {
previewImageList.value.push(item.image);
}
});
}
// 轮播图滚动
const swiperIndex = ref(0);
function getSwiperIndex(index) {
swiperIndex.value = index.current;
}
// 轮播图预览
const previewImageList = ref([]); //预览图片列表
function previewImage(index) {
uni.previewImage({
current: index, //预览图片的下标
urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
loop: true,
});
}
//#endregion ---------------------
//#region 页面跳转
function bueCoin() {
uni.navigateTo({
@@ -147,7 +153,6 @@ if (userInfoModulesPinia.platForm == 1) {
//#endregion
//#region 录音
function startRecord() {
if (userInfoModulesPinia.platForm != 1) {
console.log("开始录音xcx");
@@ -188,6 +193,15 @@ async function playVoice() {
}
//#endregion ---------------------
//#region 初始化
const workId = ref(null); //作品id
onLoad(async (options) => {
workId.value = options.id;
// await getSwiperList();
// await getSupperPhotoState(swiperList.value[0].id);
});
//#endregion ---------------------
//#region
//#endregion ---------------------
@@ -196,20 +210,75 @@ async function playVoice() {
<style lang="scss">
.page {
position: relative;
padding-bottom: 200rpx;
}
image {
height: 650rpx;
.modeImage {
width: 540rpx;
height: 720rpx;
}
.myBtnbox {
margin-top: 30rpx;
}
.orangeBtn {
position: relative;
margin-top: 30rpx;
image {
vertical-align: text-top;
width: 52rpx;
height: 40rpx;
margin-right: 20rpx;
}
.rerecord {
position: absolute;
top: -14rpx;
right: -78rpx;
height: 50rpx;
width: 142rpx;
text-align: center;
line-height: 50rpx;
border-radius: 25rpx;
background-color: #000;
font-size: 22rpx;
font-weight: bold;
}
}
.transparentBtn {
background-color: transparent;
border: 2rpx solid #fff;
}
.shareBox {
margin-top: 250rpx;
position: absolute;
bottom: 100rpx;
padding: 0 60rpx;
// margin-top: 150rpx;
width: 100%;
display: flex;
justify-content: space-between;
.buttonBox {
width: 30%;
.tips {
position: absolute;
top: -70rpx;
right: 60rpx;
width: 313rpx;
height: 50rpx;
background-color: #000;
border-radius: 25rpx 25rpx 25rpx 0;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
text-align: center;
}
.shareBtn {
width: 200rpx;
height: 72rpx;
line-height: 72rpx;
text-align: center;
background-color: #3d3e3f;
border-radius: 36rpx;
font-size: 26rpx;
font-weight: 400;
color: #ffffff;
}
}
.popup {
@@ -223,21 +292,24 @@ image {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 160rpx;
width: 50%;
background-color: #fff;
width: 530rpx;
height: 173rpx;
// background-color: #fff;
z-index: 3;
overflow: hidden;
image {
position: absolute;
left: -500rpx;
display: inline-block;
width: 1000rpx;
height: 160rpx;
z-index: 3;
// animation: moveImage 3s linear infinite;
width: 520rpx;
height: 173rpx;
}
// image {
// position: absolute;
// left: -500rpx;
// display: inline-block;
// width: 1000rpx;
// height: 160rpx;
// z-index: 3;
// // animation: moveImage 3s linear infinite;
// }
@keyframes moveImage {
0% {
left: -100rpx;
@@ -253,36 +325,25 @@ image {
.microphoneIcon {
position: absolute;
bottom: 0;
height: 500rpx;
height: 410rpx;
width: 100%;
border-radius: 36rpx 36rpx 0 0;
background-color: #fff;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mask {
position: absolute;
top: 40%;
left: 47%;
transform: translate(-50%, -50%);
width: 95rpx;
height: 95rpx;
transform: rotate(45deg);
z-index: 4;
background: url("../../assets/icon/u149.png");
}
image {
max-width: 0%;
max-height: 0%;
transform: rotate(45deg);
// max-width: 0%;
// max-height: 0%;
width: 108rpx;
height: 83rpx;
touch-action: none;
z-index: -1;
pointer-events: none;
}
// img {
// pointer-events: none;
// }
}
}
</style>

+ 1
- 0
src/pages/uploadPhoto/uploadPhoto.vue View File

@@ -37,6 +37,7 @@
</view>
<view class="uploadBtn">
<view @click="toCloseStyle" class="orangeBtn">上传新头像</view>
<!-- '/pages/closeStyle/closeStyle' '/pages/closeStyle/multiplayer' -->
<view
class="grayBtn"
v-if="userInfoModulesPinia.myAvatar"


Loading…
Cancel
Save