congzc 1 vuosi sitten
vanhempi
commit
f2d408bf49
6 muutettua tiedostoa jossa 242 lisäystä ja 87 poistoa
  1. BIN
      src/assets/img/avatar.png
  2. BIN
      src/assets/img/icon.png
  3. BIN
      src/assets/img/reset.png
  4. +184
    -72
      src/pages/home/index.vue
  5. +27
    -11
      src/pages/recorded/index.vue
  6. +31
    -4
      src/style/my.scss

BIN
src/assets/img/avatar.png Näytä tiedosto

Before After
Leveys: 260  |  Korkeus: 260  |  Koko: 90 KiB

BIN
src/assets/img/icon.png Näytä tiedosto

Before After
Leveys: 33  |  Korkeus: 32  |  Koko: 2.7 KiB

BIN
src/assets/img/reset.png Näytä tiedosto

Before After
Leveys: 66  |  Korkeus: 66  |  Koko: 3.4 KiB

+ 184
- 72
src/pages/home/index.vue Näytä tiedosto

@@ -1,27 +1,35 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 背景图 -->
<!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
<!-- 头像 --> <!-- 头像 -->
<view class="avatarBox"> <view class="avatarBox">
<up-avatar :src="avatarUrl" size="150"></up-avatar>
<image
class="avatar"
src="../../assets/img/avatar.png"
mode="scaleToFill"
/>
<view @click="chooseAvatar" class="changeAvatar"> <view @click="chooseAvatar" class="changeAvatar">
<image src="../../assets/icon/reset.png" mode="aspectFit" />
<image src="../../assets/img/reset.png" mode="aspectFit" />
</view> </view>
</view> </view>
<!-- 金币 --> <!-- 金币 -->
<view class="coinBox"> <view class="coinBox">
我的金币:&nbsp; &nbsp;30 我的金币:&nbsp; &nbsp;30
<text @click="goBuyCoin">[点击购买]</text></view
<text @click="goBuyCoin">购买金币</text></view
> >
<!-- tab栏 --> <!-- tab栏 -->
<u-tabs
:list="tabList"
:activeStyle="{
color: '#4452d7',
fontWeight: 'bold',
transform: 'scale(1.05)',
}"
@click="clickTabHandle"
></u-tabs>
<view class="tabsBox">
<view
class="tabItem"
v-for="item in tabList"
:key="item.id"
:class="showListActive == item.id ? 'active' : ''"
@click="clickTabHandle(item)"
>
{{ item.name }}</view
>
</view>
<!-- 显示风格列表内容 --> <!-- 显示风格列表内容 -->
<view v-show="showListActive == 1" class="showStyleList"> <view v-show="showListActive == 1" class="showStyleList">
<view v-for="item in 7" :key="item" class="showListItem"> <view v-for="item in 7" :key="item" class="showListItem">
@@ -41,32 +49,33 @@
</view> </view>
</view> </view>
<!-- 显示邀请列表内容 --> <!-- 显示邀请列表内容 -->
<view v-show="showListActive == 2" class="showInviteList">
<view v-for="item in 3" class="InviteList">
<up-avatar :src="avatarUrl" size="50"></up-avatar>
<view class="info">
<view class="name">猕猴桃</view>
<view class="time">2023/7/29</view>
<view class="InviteBox" v-show="showListActive == 3">
<scroll-view :scroll-y="true" class="showInviteList">
<view v-for="item in 9" class="InviteList">
<up-avatar :src="avatarUrl" size="50"></up-avatar>
<view class="info">
<view class="name">猕猴桃</view>
<view class="time">2023/7/29</view>
</view>
<view class="getCoin"> 金币+2 </view>
</view> </view>
<view class="getCoin"> 金币+2 </view>
</view>
</scroll-view>
<view class="inviteBtn">继续邀请好友</view>
</view> </view>
<!-- 显示消费列表内容 --> <!-- 显示消费列表内容 -->
<view v-show="showListActive == 3" class="showOrderList">
<view v-show="showListActive == 4" class="showOrderList">
<view class="top"> <view class="top">
<text>名称</text> <text>名称</text>
<text>时间</text> <text>时间</text>
<text>花费</text>
</view>
<view
v-for="item in 16"
class="OrderListItem"
:class="item % 2 != 1 ? 'otherBgc' : ''"
>
<view class="name">大西瓜</view>
<view class="time">2023/7/29</view>
<view class="coin">-2金币</view>
<text>金币</text>
</view> </view>
<scroll-view :scroll-y="true" class="bottom">
<view class="OrderListItem" v-for="item in 16">
<view class="name">大西瓜</view>
<view class="time">2023/7/29 </view>
<view class="coin">-2金币</view>
</view>
</scroll-view>
</view> </view>
</view> </view>
</template> </template>
@@ -131,13 +140,14 @@ function goBuyCoin() {
//#region tab //#region tab
const tabList = ref([ const tabList = ref([
{ name: "我的写真", value: 1 },
{ name: "我的邀请", value: 2 },
{ name: "消费记录", value: 3 },
{ name: "我的写真", id: 1 },
{ name: "我的视频", id: 2 },
{ name: "我的邀请", id: 3 },
{ name: "消费记录", id: 4 },
]); ]);
const showListActive = ref(1);
const showListActive = ref(3);
function clickTabHandle(e) { function clickTabHandle(e) {
showListActive.value = e.value;
showListActive.value = e.id;
} }
//#endregion //#endregion
@@ -147,14 +157,39 @@ function clickTabHandle(e) {
</script> </script>
<style lang="scss"> <style lang="scss">
.page {
position: relative;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
// background: url("../../assets/img/avatar.png");
.bgc {
position: absolute;
width: 750rpx;
height: 750rpx;
transform: scale(1.5);
top: 187rpx;
left: 0;
object-fit: cover;
z-index: -2;
backdrop-filter: blur(3px);
// backdrop-filter: blur(20px);
}
}
.avatarBox { .avatarBox {
position: relative; position: relative;
width: 260rpx;
height: 260rpx;
.avatar {
width: 260rpx;
height: 260rpx;
border-radius: 130rpx;
}
.changeAvatar { .changeAvatar {
position: absolute; position: absolute;
right: -0%;
top: 70%;
width: 40rpx;
height: 40rpx;
right: -20rpx;
bottom: 0;
width: 66rpx;
height: 66rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -162,15 +197,39 @@ function clickTabHandle(e) {
} }
} }
.coinBox { .coinBox {
margin-top: 30rpx;
margin-top: 38rpx;
line-height: 50rpx;
text { text {
font-weight: 700;
margin-left: 28rpx;
display: inline-block;
width: 160rpx;
height: 50rpx;
border-radius: 50rpx;
font-size: 26rpx;
text-align: center;
// font-weight: 700;
background-color: rgba(255, 255, 255, 0.1);
} }
} }
.u-tabs {
margin-top: 20rpx;
width: 100%;
// tab栏样式
.tabsBox {
display: flex;
justify-content: space-between;
margin-top: 50rpx;
.tabItem {
margin: 0 9rpx;
width: 160rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 12rpx;
background-color: rgba(255, 255, 255, 0.1);
}
.active {
background-color: rgba(255, 79, 0, 1);
}
} }
// 风格列表 // 风格列表
.showStyleList { .showStyleList {
margin-top: 20rpx; margin-top: 20rpx;
@@ -203,64 +262,117 @@ function clickTabHandle(e) {
} }
} }
// 邀请列表 // 邀请列表
.InviteBox {
width: 100%;
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
.inviteBtn {
position: absolute;
bottom: 20rpx;
left: 50%;
transform: translate(-50%, 0);
width: 520rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
background-color: rgba(255, 79, 0, 1);
border-radius: 50rpx;
}
}
.showInviteList { .showInviteList {
position: relative;
margin-top: 15rpx;
flex: 1;
overflow: hidden;
width: 100%; width: 100%;
.InviteList { .InviteList {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin-top: 15rpx;
margin-bottom: 12rpx;
width: 100%; width: 100%;
height: 150rpx;
border: 5rpx solid #000;
border-radius: 30rpx;
height: 120rpx;
border-radius: 24rpx;
background-color: rgba(255, 255, 255, 0.1);
.u-avatar { .u-avatar {
margin: 0 30rpx; margin: 0 30rpx;
height: 150rpx !important;
height: 120rpx !important;
} }
.info { .info {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
.name {
font-weight: bold;
}
.time {
font-size: 22rpx;
}
} }
.getCoin { .getCoin {
width: 145rpx; width: 145rpx;
height: 145rpx;
line-height: 145rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center; text-align: center;
border-left: 5rpx solid #000;
border-radius: 30rpx;
margin-right: 30rpx;
} }
} }
.InviteList:last-child::after {
content: "";
width: 1rpx;
height: 130rpx;
padding-bottom: 130rpx;
}
} }
// 消费列表 // 消费列表
.showOrderList { .showOrderList {
position: relative;
flex: 1;
margin-top: 30rpx; margin-top: 30rpx;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 24rpx;
width: 100%; width: 100%;
box-sizing: border-box;
padding: 15rpx 20rpx;
// padding-top: 80rpx;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
.top { .top {
padding: 0 30rpx;
width: 100%; width: 100%;
height: 80rpx;
line-height: 80rpx;
border-radius: 30rpx;
padding: 0 50rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 40rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: #e9e9e9;
background-color: rgba(0, 0, 0, 0.2);
font-size: 22rpx;
} }
.OrderListItem {
// margin-top: 15rpx;
padding: 0 15rpx;
.bottom {
// flex: 1;
width: 100%; width: 100%;
display: flex;
height: 80rpx;
line-height: 80rpx;
border-bottom: 5rpx solid #fff;
border-radius: 15rpx;
justify-content: space-between;
background-color: #fff;
}
.otherBgc {
background-color: #f6f7f9;
overflow: hidden;
.OrderListItem {
display: flex;
justify-content: space-between;
padding: 0 20rpx;
height: 65rpx;
line-height: 65rpx;
.name,
.coin {
font-weight: 900;
}
.time {
font-weight: 100;
}
}
} }
} }
</style> </style>

+ 27
- 11
src/pages/recorded/index.vue Näytä tiedosto

@@ -74,12 +74,13 @@
</u-transition> </u-transition>
<!-- 底部框 --> <!-- 底部框 -->
<u-transition :show="showPopup">
<view
class="transition microphoneIcon"
@touchstart.stop="startRecord"
@touchend.stop="endRecord"
>
<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" /> <image src="../../assets/icon/u149.png" mode="aspectFit" />
</view> </view>
</u-transition> </u-transition>
@@ -105,7 +106,7 @@ function bueCoin() {
//#endregion --------------------- //#endregion ---------------------
//#region 弹出层 //#region 弹出层
const showPopup = ref(false);
const showPopup = ref(true);
function openPopup() { function openPopup() {
showPopup.value = true; showPopup.value = true;
} }
@@ -172,18 +173,17 @@ async function endRecord() {
await recorder.stop(); await recorder.stop();
audioUrl.value = URL.createObjectURL(recorder.getWAVBlob()); audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
} }
showPopup.value = false;
} }
async function playVoice() { async function playVoice() {
if (userInfoModulesPinia.platForm != 1) { if (userInfoModulesPinia.platForm != 1) {
await innerAudioContext.play(); await innerAudioContext.play();
console.log("试听了xcx"); console.log("试听了xcx");
showPopup.value = false;
} else { } else {
const link = document.createElement("audio"); const link = document.createElement("audio");
link.src = audioUrl.value; link.src = audioUrl.value;
link.play(); link.play();
console.log("试听了h5"); console.log("试听了h5");
showPopup.value = false;
} }
} }
//#endregion --------------------- //#endregion ---------------------
@@ -261,11 +261,27 @@ image {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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 { image {
max-width: 15%;
max-height: 15%;
max-width: 0%;
max-height: 0%;
transform: rotate(45deg); transform: rotate(45deg);
touch-action: none; touch-action: none;
z-index: -1;
pointer-events: none;
}
img {
pointer-events: none;
} }
} }
} }


+ 31
- 4
src/style/my.scss Näytä tiedosto

@@ -2,13 +2,40 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
padding: 20rpx;
// justify-content: center;
padding: 30rpx;
background-color: #fff; background-color: #fff;
font-size: 28rpx;
// min-height: 100vh;
font-size: 26rpx;
color: #fff;
min-height: 100vh;
} }
body {
-webkit-touch-callout: none;
/*系统默认菜单被禁用*/
-webkit-user-select: none;
/*webkit浏览器*/
-khtml-user-select: none;
/*早起浏览器*/
-moz-user-select: none;
/*火狐浏览器*/
-ms-user-select: none;
/*IE浏览器*/
user-select: none;
/*用户是否能够选中文本*/
}
// * {
// user-select: none;
// touch-action: none;
// -webkit-touch-callout: none !important;
// -webkit-user-select: none !important;
// -khtml-user-select: none !important;
// -moz-user-select: none !important;
// -ms-user-select: none !important;
// user-select: none !important;
// }
// body { // body {
// background-color: #FFFFFF !important; // background-color: #FFFFFF !important;
// } // }


Ladataan…
Peruuta
Tallenna