congzc pirms 1 gada
vecāks
revīzija
fecdcd1d88
17 mainītis faili ar 217 papildinājumiem un 82 dzēšanām
  1. Binārs
      src/assets/icon/add.png
  2. Binārs
      src/assets/icon/blackBG.png
  3. Binārs
      src/assets/icon/correct.png
  4. Binārs
      src/assets/icon/error.png
  5. +0
    -0
      src/assets/icon/icon.png
  6. Binārs
      src/assets/img/homeImg.png
  7. Binārs
      src/assets/img/img1.jpg
  8. Binārs
      src/assets/img/img1.png
  9. Binārs
      src/assets/img/img2.jpg
  10. Binārs
      src/assets/img/img2.png
  11. Binārs
      src/assets/img/img3.png
  12. Binārs
      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ārs
src/assets/icon/add.png Parādīt failu

Pirms Pēc
Platums: 79  |  Augstums: 79  |  Izmērs: 2.3 KiB

Binārs
src/assets/icon/blackBG.png Parādīt failu

Pirms Pēc
Platums: 185  |  Augstums: 49  |  Izmērs: 1.1 KiB

Binārs
src/assets/icon/correct.png Parādīt failu

Pirms Pēc
Platums: 36  |  Augstums: 36  |  Izmērs: 949 B

Binārs
src/assets/icon/error.png Parādīt failu

Pirms Pēc
Platums: 36  |  Augstums: 36  |  Izmērs: 919 B

src/assets/img/icon.png → src/assets/icon/icon.png Parādīt failu


Binārs
src/assets/img/homeImg.png Parādīt failu

Pirms Pēc
Platums: 750  |  Augstums: 1430  |  Izmērs: 1.2 MiB

Binārs
src/assets/img/img1.jpg Parādīt failu

Pirms Pēc

Binārs
src/assets/img/img1.png Parādīt failu

Pirms Pēc
Platums: 180  |  Augstums: 180  |  Izmērs: 54 KiB

Binārs
src/assets/img/img2.jpg Parādīt failu

Pirms Pēc
Platums: 242  |  Augstums: 102  |  Izmērs: 13 KiB

Binārs
src/assets/img/img2.png Parādīt failu

Pirms Pēc
Platums: 200  |  Augstums: 200  |  Izmērs: 75 KiB

Binārs
src/assets/img/img3.png Parādīt failu

Pirms Pēc
Platums: 180  |  Augstums: 180  |  Izmērs: 60 KiB

Binārs
src/assets/img/scanBorder.png Parādīt failu

Pirms Pēc
Platums: 361  |  Augstums: 481  |  Izmērs: 5.1 KiB

+ 1
- 1
src/pages/closeStyle/goCreatePhoto.vue Parādīt failu

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


+ 2
- 2
src/pages/createing/index.vue Parādīt failu

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


+ 46
- 29
src/pages/index/index.vue Parādīt failu

@@ -1,13 +1,15 @@
<template> <template>
<view class="page"> <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" src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
autoplay autoplay
muted muted
loop loop
:controls="false" :controls="false"
/>
/> -->
<!-- <video <!-- <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" 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 autoplay
@@ -15,24 +17,20 @@
:controls="false" :controls="false"
/> --> /> -->
</view> </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> </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> </view>
</template> </template>
@@ -96,7 +94,13 @@ voiceTotalApi();
<style lang="scss"> <style lang="scss">
.page { .page {
position: relative;
padding: 0; padding: 0;
min-height: 100vh;
}
.bgImg {
width: 750rpx;
height: 100vh;
} }
.videoBox { .videoBox {
width: 750rpx; width: 750rpx;
@@ -108,14 +112,27 @@ voiceTotalApi();
// aspect-ratio: 9/12; // 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> </style>

+ 4
- 4
src/pages/recorded/index.vue Parādīt failu

@@ -1,6 +1,6 @@
<template> <template>
<view class="page" @touchmove.stop.prevent=""> <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"> <view v-show="!audioUrl" class="myBtnbox">
<up-button <up-button
type="primary" type="primary"
@@ -280,9 +280,9 @@ image {
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
} }
img {
pointer-events: none;
}
// img {
// pointer-events: none;
// }
} }
} }
</style> </style>

+ 164
- 46
src/pages/uploadPhoto/uploadPhoto.vue Parādīt failu

@@ -1,25 +1,25 @@
<template> <template>
<view class="page"> <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="uploadBox imgContenBox scan">
<!-- 扫描线 -->
<view class="scan-line"></view> <view class="scan-line"></view>
<image <image
class="scan-border"
src="../../assets/img/scanBorder.png"
mode="aspectFit"
/>
<!-- 上传按钮 -->
<image
class="addImg"
v-show="!showImgUrl" v-show="!showImgUrl"
src="../../assets/icon/uploadImg.png"
src="../../assets/icon/add.png"
alt="" alt=""
@click="chooseImage" @click="chooseImage"
/> />
@@ -32,19 +32,40 @@
mode="aspectFit" mode="aspectFit"
/> />
</view> </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>
<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>
</view> </view>
</template> </template>
@@ -117,24 +138,48 @@ function toCloseStyle() {
</script> </script>
<style lang="scss"> <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 { .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 { .uploadBox {
position: relative; 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; 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 { .showImg {
max-width: 90%; 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> </style>

Notiek ielāde…
Atcelt
Saglabāt