congzc 1 år sedan
förälder
incheckning
fecdcd1d88
17 ändrade filer med 217 tillägg och 82 borttagningar
  1. Binär
      src/assets/icon/add.png
  2. Binär
      src/assets/icon/blackBG.png
  3. Binär
      src/assets/icon/correct.png
  4. Binär
      src/assets/icon/error.png
  5. +0
    -0
      src/assets/icon/icon.png
  6. Binär
      src/assets/img/homeImg.png
  7. Binär
      src/assets/img/img1.jpg
  8. Binär
      src/assets/img/img1.png
  9. Binär
      src/assets/img/img2.jpg
  10. Binär
      src/assets/img/img2.png
  11. Binär
      src/assets/img/img3.png
  12. Binär
      src/assets/img/scanBorder.png
  13. +1
    -1
      src/pages/closeStyle/goCreatePhoto.vue
  14. +2
    -2
      src/pages/createing/index.vue
  15. +46
    -29
      src/pages/index/index.vue
  16. +4
    -4
      src/pages/recorded/index.vue
  17. +164
    -46
      src/pages/uploadPhoto/uploadPhoto.vue

Binär
src/assets/icon/add.png Visa fil

Före Efter
Bredd: 79  |  Höjd: 79  |  Storlek: 2.3 KiB

Binär
src/assets/icon/blackBG.png Visa fil

Före Efter
Bredd: 185  |  Höjd: 49  |  Storlek: 1.1 KiB

Binär
src/assets/icon/correct.png Visa fil

Före Efter
Bredd: 36  |  Höjd: 36  |  Storlek: 949 B

Binär
src/assets/icon/error.png Visa fil

Före Efter
Bredd: 36  |  Höjd: 36  |  Storlek: 919 B

src/assets/img/icon.png → src/assets/icon/icon.png Visa fil


Binär
src/assets/img/homeImg.png Visa fil

Före Efter
Bredd: 750  |  Höjd: 1430  |  Storlek: 1.2 MiB

Binär
src/assets/img/img1.jpg Visa fil

Före Efter

Binär
src/assets/img/img1.png Visa fil

Före Efter
Bredd: 180  |  Höjd: 180  |  Storlek: 54 KiB

Binär
src/assets/img/img2.jpg Visa fil

Före Efter
Bredd: 242  |  Höjd: 102  |  Storlek: 13 KiB

Binär
src/assets/img/img2.png Visa fil

Före Efter
Bredd: 200  |  Höjd: 200  |  Storlek: 75 KiB

Binär
src/assets/img/img3.png Visa fil

Före Efter
Bredd: 180  |  Höjd: 180  |  Storlek: 60 KiB

Binär
src/assets/img/scanBorder.png Visa fil

Före Efter
Bredd: 361  |  Höjd: 481  |  Storlek: 5.1 KiB

+ 1
- 1
src/pages/closeStyle/goCreatePhoto.vue Visa fil

@@ -1,7 +1,7 @@
<template>
<view class="page">
<view class="showImgBox imgContenBox"
><image src="../../assets/img/img1.jpg" mode="aspectFit"
><image src="../../assets/img/img1.png" mode="aspectFit"
/></view>
<text class="name">风格名称</text>
<view class="buttonBox">


+ 2
- 2
src/pages/createing/index.vue Visa fil

@@ -2,7 +2,7 @@
<view class="page">
<view class="topBox">
<view class="imgContenBox">
<image src="../../assets/img/img2.jpg" mode="aspectFit" />
<image src="../../assets/img/img2.png" mode="aspectFit" />
</view>
<up-button
type="primary"
@@ -18,7 +18,7 @@
:key="item"
@click="goLookPhoto"
>
<image src="../../assets/img/img2.jpg" mode="aspectFit" />
<image src="../../assets/img/img2.png" mode="aspectFit" />
</view>
</view>
<!-- 生成中的底部栏 -->


+ 46
- 29
src/pages/index/index.vue Visa fil

@@ -1,13 +1,15 @@
<template>
<view class="page">
<view class="videoBox">
<video
<image class="bgImg" src="../../assets/img/homeImg.png" mode="aspectFit" />
<!-- 视频,已废弃 -->
<view v-show="false" class="videoBox">
<!-- <video
src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
autoplay
muted
loop
:controls="false"
/>
/> -->
<!-- <video
src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4"
autoplay
@@ -15,24 +17,20 @@
:controls="false"
/> -->
</view>
<view class="buttonBox">
<up-button
type="primary"
text="开始制作我的数字分身"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="toCreate"
></up-button>
<view class="bottomBox">
<view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view>
<u-checkbox-group v-model="checkboxValue1" placement="row">
<u-checkbox
labelColor="white"
activeColor="red"
v-for="(item, index) in checkboxList1"
:key="index"
:label="item.name"
:name="item.name"
>
</u-checkbox>
</u-checkbox-group>
</view>
<u-checkbox-group v-model="checkboxValue1" placement="row">
<u-checkbox
activeColor="red"
v-for="(item, index) in checkboxList1"
:key="index"
:label="item.name"
:name="item.name"
>
</u-checkbox>
</u-checkbox-group>
</view>
</template>
@@ -96,7 +94,13 @@ voiceTotalApi();
<style lang="scss">
.page {
position: relative;
padding: 0;
min-height: 100vh;
}
.bgImg {
width: 750rpx;
height: 100vh;
}
.videoBox {
width: 750rpx;
@@ -108,14 +112,27 @@ voiceTotalApi();
// aspect-ratio: 9/12;
}
}
button {
margin-top: 50rpx;
}
.buttonBox {
width: 50%;
}
.u-checkbox-group {
margin-top: 70rpx;
.bottomBox {
position: absolute;
bottom: 0;
width: 100%;
height: 345rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
color: #fff !important;
.bottomBtn {
margin-top: 55rpx;
margin-bottom: 65rpx;
width: 520rpx;
height: 100rpx;
border-radius: 50rpx;
line-height: 100rpx;
text-align: center;
background-color: rgba(255, 79, 0, 1);
font-size: 30rpx;
font-weight: 900;
}
}
</style>

+ 4
- 4
src/pages/recorded/index.vue Visa fil

@@ -1,6 +1,6 @@
<template>
<view class="page" @touchmove.stop.prevent="">
<image src="../../assets/img/img1.jpg" mode="aspectFit" />
<image src="../../assets/img/img1.png" mode="aspectFit" />
<view v-show="!audioUrl" class="myBtnbox">
<up-button
type="primary"
@@ -280,9 +280,9 @@ image {
z-index: -1;
pointer-events: none;
}
img {
pointer-events: none;
}
// img {
// pointer-events: none;
// }
}
}
</style>

+ 164
- 46
src/pages/uploadPhoto/uploadPhoto.vue Visa fil

@@ -1,25 +1,25 @@
<template>
<view class="page">
<view class="title imgContenBox">
<view class="title">
<!-- 提示文字 -->
<image
v-show="uploadState == 1"
src="../../assets/text/uploadText.png"
mode="aspectFit" /><image
aspectFit
v-show="uploadState == 2"
src="../../assets/text/uploadText2.png"
mode="aspectFit" /><image
v-show="uploadState == 3"
src="../../assets/text/uploadText3.png"
mode="aspectFit"
/></view>
<text class="tips">照片不符合规范,请重新上传</text>
<text v-show="false" class="tips">添加一张正面照片</text>
<text v-show="false" class="tips">数字形象生成中</text>
</view>
<!-- 上传图片和展示 -->
<view class="uploadBox imgContenBox scan">
<!-- 扫描线 -->
<view class="scan-line"></view>
<image
class="scan-border"
src="../../assets/img/scanBorder.png"
mode="aspectFit"
/>
<!-- 上传按钮 -->
<image
class="addImg"
v-show="!showImgUrl"
src="../../assets/icon/uploadImg.png"
src="../../assets/icon/add.png"
alt=""
@click="chooseImage"
/>
@@ -32,19 +32,40 @@
mode="aspectFit"
/>
</view>
<view class="bottonBox">
<up-button
type="primary"
text="上传我的照片"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="toCloseStyle"
></up-button>
<view @click="toCloseStyle" class="uploadBtn">
<text>上传我的照片</text>
<view class="free">
<image src="../../assets/icon/blackBG.png" mode="aspectFit" />
<text>新用户免费制作</text>
</view>
</view>
<view class="tips">请按照样片上传您五官清晰的正面照片</view>
<view class="demoImgBox">
<view class="demoImg1"></view>
<view class="demoImg2"></view>
<view class="demoImg1"></view>
<!-- 底部盒子 -->
<view class="bottomBox">
<view class="tips2">请按照样片上传您五官清晰的正面照片</view>
<view class="demoImgBox">
<view class="imgBox">
<image src="../../assets/img/img1.png" mode="aspectFit" />
<view class="icon">
<image src="../../assets/icon/error.png" mode="aspectFit" />
</view>
</view>
<view class="imgBox">
<image
class="rightImg"
src="../../assets/img/img2.png"
mode="aspectFit"
/>
<view class="icon">
<image src="../../assets/icon/correct.png" mode="aspectFit" />
</view>
</view>
<view class="imgBox">
<image src="../../assets/img/img3.png" mode="aspectFit" />
<view class="icon">
<image src="../../assets/icon/error.png" mode="aspectFit" />
</view>
</view>
</view>
</view>
</view>
</template>
@@ -117,24 +138,48 @@ function toCloseStyle() {
</script>
<style lang="scss">
.page {
position: relative;
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
.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);
}
}
.title {
width: 100%;
height: 80rpx;
image {
// min-width: 40%;
height: 80rpx;
margin-bottom: 40rpx;
.tips {
margin-top: 20rpx;
color: #fff;
font-size: 44rpx;
font-weight: 900;
}
}
.uploadBox {
position: relative;
width: 600rpx;
height: 600rpx;
border: 5rpx solid #000;
width: 420rpx;
height: 560rpx;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50rpx;
margin-bottom: 50rpx;
image {
max-width: 30%;
max-height: 30%;
.scan-border {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 360rpx;
height: 480rpx;
}
.addImg {
width: 80rpx;
height: 80rpx;
}
.showImg {
max-width: 90%;
@@ -173,15 +218,88 @@ function toCloseStyle() {
}
}
}
.buttonBox {
width: 50%;
}
// 上传
.u-button {
// width: 70% !important;
.uploadBtn {
position: relative;
margin-top: 75rpx;
width: 520rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background: #ff4f00;
border-radius: 50rpx;
font-size: 30rpx;
color: #fff;
font-weight: 900;
.free {
position: absolute;
top: -25rpx;
right: -80rpx;
width: 185rpx;
height: 50rpx;
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
text {
position: absolute;
top: -25rpx;
left: 50%;
transform: translate(-50%, 0);
width: 100%;
height: 100%;
font-size: 22rpx;
font-weight: 900;
z-index: 2;
}
}
}
.tips {
margin-top: 20rpx;
margin-bottom: 20rpx;
// 底部盒子
.bottomBox {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0 0 90rpx 0;
.tips2 {
margin-top: 20rpx;
margin-bottom: 15rpx;
font-size: 22rpx;
}
.demoImgBox {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 20rpx;
width: 100%;
.imgBox {
position: relative;
image {
width: 180rpx;
height: 180rpx;
}
.rightImg {
width: 200rpx;
height: 200rpx;
}
.icon {
position: absolute;
top: -8rpx;
right: -8rpx;
width: 36rpx;
height: 36rpx;
image {
width: 100%;
height: 100%;
}
}
}
}
}
</style>

Laddar…
Avbryt
Spara