From e0aa3ec933a182036777f1886feb083c39433384 Mon Sep 17 00:00:00 2001
From: JING <leirance@live.com>
Date: Tue, 23 Jul 2024 15:39:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages.json | 8 ++
pages/index/index.vue | 15 +-
pagesA/color/index.vue | 271 ++++++++++++++++++++++++++++++++++++
static/img/index/add.png | Bin 0 -> 1292 bytes
static/img/index/duigou.png | Bin 0 -> 1914 bytes
static/img/index/tips.png | Bin 0 -> 338 bytes
6 files changed, 290 insertions(+), 4 deletions(-)
create mode 100644 pagesA/color/index.vue
create mode 100644 static/img/index/add.png
create mode 100644 static/img/index/duigou.png
create mode 100644 static/img/index/tips.png
diff --git a/pages.json b/pages.json
index 0b4630c..4cd3dbd 100644
--- a/pages.json
+++ b/pages.json
@@ -114,6 +114,14 @@
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
+ },
+ {
+ "path" : "color/index",
+ "style" :
+ {
+ "navigationBarTitleText" : "证件照换底色",
+ "navigationStyle": "custom"
+ }
}
]
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 703eb9b..4fa4244 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -18,16 +18,16 @@
<view class="contentBox">
<view class="navBox">
- <view class="navItem">
+ <view class="navItem" @click="goTo('/pagesA/photo/photo_1')">
<image src="/static/img/index/zjhc.png" mode="widthFix"></image>
</view>
- <view class="navItem">
+ <view class="navItem" @click="goTo('/pagesA/color/index')">
<image src="/static/img/index/zjgs.png" mode="widthFix"></image>
</view>
- <view class="navItem">
+ <view class="navItem" @click="goTo('/pagesA/photo/face')">
<image src="/static/img/index/aixz.png" mode="widthFix"></image>
</view>
- <view class="navItem">
+ <view class="navItem" @click="goTo('/pagesA/photo/cartoon_1')">
<image src="/static/img/index/kthf.png" mode="widthFix"></image>
</view>
</view>
@@ -215,6 +215,13 @@
}
},
methods: {
+ goTo(url)
+ {
+ uni.$u.route({
+ type:'navigateTo',
+ url: url,
+ });
+ },
//获取门店信息
getHomeInfo(){
var _this =this;
diff --git a/pagesA/color/index.vue b/pagesA/color/index.vue
new file mode 100644
index 0000000..1e854f9
--- /dev/null
+++ b/pagesA/color/index.vue
@@ -0,0 +1,271 @@
+<template>
+ <view class="container">
+ <view class="uploadBox">
+ <view class="uploadBtn">
+ <view class="uploadBtn_img">
+ <image src="/static/img/index/add.png" mode="widthFix"></image>
+ </view>
+ <view class="uploadBtn_txt">点击上传人物换背景</view>
+ </view>
+ </view>
+ <view class="uploadTips" @click="tips">
+ <text>照片注意事项</text> <image src="/static/img/index/tips.png" mode="widthFix"></image>
+ </view>
+
+ <view class="colorBox">
+ <view class="title">选择背景颜色</view>
+ <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
+ <view class="color on" style="background-color: blue;">
+ <image src="/static/img/index/duigou.png" mode="widthFix"></image>
+ </view>
+ <view class="color" style="background-color:green;">
+ </view>
+ <view class="color" style="background-color:greenyellow;">
+ </view>
+ <view class="color" style="background-color:darkred;">
+ </view>
+ <view class="color" style="background-color:red;">
+ </view>
+ <view class="color" style="background-color: blueviolet;">
+ </view>
+ <view class="color" style="background-color: yellowgreen;">
+ </view>
+ <view class="color" style="background-color:green;">
+ </view>
+ <view class="color" style="background-color:greenyellow;">
+ </view>
+ <view class="color" style="background-color:darkred;">
+ </view>
+ <view class="color" style="background-color:red;">
+ </view>
+ </scroll-view>
+
+ <view class="btnBox no">
+ 保存
+ </view>
+ <view class="btnBox yes">
+ 保存
+ </view>
+ <view class="num">
+ <text>剩余生成次数</text>
+ <text class="use">1</text>
+ <text>/30</text>
+ </view>
+ </view>
+
+
+ <u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
+ <view class="popupBox">
+ <view class="popupTop">
+ 提醒
+ </view>
+ <view class="popupDesc">
+ <u-parse :content="content" :tagStyle="style"></u-parse>
+
+ </view>
+ <view class="popupBtn">
+ <view class="sbtnBox a3" @click="yes">我了解啦</view>
+ </view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ //弹窗
+ show: false,
+ content: `<p>1.人物需抬头挺胸，两眼平视前方</p>
+ <p>2.人物应去掉发饰，眼镜，露出双耳</p>
+ <p>3.深色衣服，白色背景墙效果更佳</p>
+ <p>4.请使用后置摄像头拍摄，效果更佳</p>`,
+ style: {
+ // 字符串的形式
+
+ p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
+
+ },
+
+
+ }
+ },
+ methods: {
+ //滚动监控
+ scroll1(e) {
+ console.log(e);
+ },
+ //弹窗
+ tips(){
+ this.show = true;
+ },
+
+ open() {
+ console.log('open');
+ },
+ close() {
+ this.show = false;
+
+ },
+ yes(){
+ this.close();
+ },
+ }
+ }
+</script>
+
+<style lang="scss">
+page{background-color: #F5F6FB;}
+.container{width: 100%;}
+.uploadBox{
+ width: 400rpx;
+ height: 500rpx;
+ background: #FFFFFF;
+ border-radius: 24rpx;
+ margin:200rpx auto auto auto;
+}
+.uploadBtn{ width: 100%; height: auto;}
+.uploadBtn_img{ width: 100%; height: auto; text-align: center;}
+.uploadBtn_img image{ width: 96rpx; height: 96rpx; margin: 160rpx auto auto auto; display: inline-block;}
+.uploadBtn_txt{
+ width: 100%;
+ height: auto;
+ font-weight: 400;
+ font-size: 30rpx;
+ color: #333333;
+ line-height: 44rpx;
+ text-align: center;
+}
+.uploadTips{ width: 100%; height: 50rpx; line-height: 50rpx; text-align: center;}
+.uploadTips text{
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+}
+.uploadTips image{ width: 24rpx; height: 24rpx; display: inline-block; margin-left: 10rpx;}
+
+.colorBox{
+ width: 750rpx;
+ height: 520rpx;
+ background: #FFFFFF;
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
+ position: fixed;
+ bottom: 0;
+}
+.title{
+ width: 100%;
+ height: 40rpx;
+ font-weight: 700;
+ font-size: 28rpx;
+ color: #333333;
+ line-height: 40rpx;
+ text-align: center;
+ margin: 20rpx 0rpx;
+}
+
+.scrollBox {
+ margin-top: 20rpx;
+ width: 100%;
+ height: 90rpx;
+ white-space: nowrap;
+
+ }
+.color{
+ width: 72rpx;
+ height: 72rpx;
+ border-radius: 50%;
+ display: inline-block;
+ margin-left: 30rpx;
+ border: 8rpx solid #FFFFFF;
+ overflow: hidden;
+}
+.on{
+ border-color:#E7E7EF;
+ }
+.on image{width: 50rpx; height:auto; margin: 12rpx 0rpx 0rpx 12rpx;}
+
+
+.popupBox{
+ width: 600rpx;
+ height: auto;
+ border-radius: 24rpx;
+ background-color: #FFFFFF;
+}
+.popupTop{
+ width: 600rpx;
+ height: 140rpx;
+ background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
+ line-height: 140rpx;
+ text-align: center;
+ font-weight: 700;
+ font-size: 30rpx;
+ color: #333333;
+}
+.popupDesc{
+ width:480rpx;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #555555;
+ padding: 0rpx 60rpx;
+}
+
+.popupBtn{ width: 100%; height: auto;
+ display: flex; flex-wrap: wrap;
+ justify-content: space-around; /* 使子元素在容器中均匀分布 */
+ align-items: center; /* 如果需要垂直居中子元素 */
+}
+.sbtnBox{
+ margin: 30rpx auto;
+ width: 478rpx;
+ height: 80rpx;
+ font-weight: 700;
+ font-size: 30rpx;
+ line-height: 80rpx;
+ border: 2rpx solid #4D94FF;
+ text-align: center;
+ border-radius: 44rpx;
+
+
+}
+
+.a3{
+ background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
+ color:#FFFFFF;
+}
+
+
+.btnBox{
+ width: 702rpx;
+ height: 88rpx;
+ border-radius: 44rpx;
+
+ font-weight: 700;
+ font-size: 30rpx;
+ line-height: 88rpx;
+ text-align: center;
+
+ margin: 20rpx auto;
+
+}
+.yes{
+ border: 2rpx solid #9B75FF;
+ background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
+ color:#FFFFFF;
+}
+.no{
+ border: 2rpx solid #ECEBF1;
+ background-color: #ECEBF1;
+ color:#C8C6D4;
+}
+
+
+.num{ width: 100%; height: 60rpx; text-align: center;
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #555555;
+ line-height: 60rpx;
+}
+.num .use{ color: #7A74F0;}
+</style>
diff --git a/static/img/index/add.png b/static/img/index/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..0045bdd39feeb4b5a40c870282fa3b0a32f2f1b8
GIT binary patch
literal 1292
zcmV+n1@roeP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(#z{m$RA@uhnoDd{WfaGM=NsCl1)*%3LZU_?244vpDRJv#QMFJ|f=~tAIDJ?s
zf{!ALi79QJ3Z3Z$6nALQg+>=fH=<iZYk~_+s!)wFsm8?c=uj+l?$K|i)6R6>!?ezw
zO>cTTx8LtOkMErGzd{K<?S8FShete0gDCeI<#vHOqbxI^qD&h2%P7B!@}ox?_P{qj
zpZs~V|6YoHKwF=#j2NC5rA1(a0Wk`qV1Vd#{Ac3tX0An1qkLzS(`q>7^U0-R)>1IQ
zbA!67a+<@U>^878Wzl&8Bz@1}n!w3Q4{yC%pjGk)*yhv9nxz~t!XdG)kz<GRx<6-)
zxYZ^_=^4Mwu~0~+^07!>06X5+brtZD!1}mb<h8&oE|h42B)5xg%(*2Ib{_1L(OeKY
z0iHdkTRiZ7G$0dpeIWs6VkivkdgX|GmJK2+!1h6X(WAU0VC;ey8Nen4N0jyheR47r
zL`Hz^0riUVZl*;qf(2$XnmBm(_se_fAkqSC3+fi*@JW2<)A{|P0w|7Ap4r!*>P{&D
zPlt4!i7;Y)em0NK1mpkULecCL4RR%HgbkhZ0y_zyaY(Cbly8mlK++DE2Y`k6{_kJd
z==)f%$K5FjpgE}B9_XDPuw~#v(F78;hQpzk{L+^K@WgSgubO7eKuuW#DB+4J?(zoY
z4+}ACf#!e?8lfxgK~;nc-M<#LHOBVo(=TB3{7f27Ul+~QPnqr~oZ6zC=<rL&EI{+1
z)?yepP+cm3H#=eZvKYWb7>)!=2Vj(|7;bIvmy1ygYzpZ<qXaT$nIbF@=uXbsulJM`
zz`D-9HopwT0ETqf*pfI?sZfRhMj37$kd0!4cZtKe(V2Qa&0>qmLJMsHqi6(HOH)X9
z3Y^Yb>y)DfVkxyno(gHefQ^C7#afvHpaf;pkbZ^mm>U5^`P#bB1%WlL1aP<@O+$J`
zgj)&$c<@fx^*F4U$@96ord;>K6Y%BdFg7}GD3I84rn`2yVl6N&;3)(k;4R(a<8T%t
zG*BRbZFrhO8p+vl%?si{E38<WYhMeyUlf2t!~$FvSYC()%EpD12@7yuU~M4)Db;G4
z0&Kw#vRI=tW`p>Q2#>lFz~PMh4>H%660R@iY_i)N(zBv8xT%~LWu$FD8lwHc<{{lH
z5OfoOQMy_OBp3yF@`SFexWVssT<(&V@>=zER=*ICOLI+qP>=toqO_L^U?H1&+y1uu
zWq;CCV(Xx;!tk>Yn?jf6U@LZbO^U;sj)9mwl{DDe8q{ua>tM^$+~d>AyK6aXV0~Fy
zKsl$AJiIqSy>ZWQ7s7UOl6ANnFMwS=UY~`q>I|GL2Z6&Vtz8*ZnyeDjj-%=o;Y7}c
zCrvq>mjIHgQYP!nii6O0@JM=fCM64{>!DmN^2LFy%(_JQ&<Y=mA+uT`!{e}{Br<Cp
zqOnt}>Tcs@fx~ePA=|42MY>Q}l-{YIIGU)!Wb3YT>csQEyvMKgMtIFAUV-Z9LT@$(
z9IhHTB@uew=#2>%`F;uph(CDGpw?F0V7JGi1$d~)mpw*2!s&{C_@KLAF6O)F#J?*V
zAn_sdUbnf|D0djBlbBp3ViiV>zHalIzz?N--R567^m8!W;dZ3}0000<MNUMnLSTZ$
C5^9$K
literal 0
HcmV?d00001
diff --git a/static/img/index/duigou.png b/static/img/index/duigou.png
new file mode 100644
index 0000000000000000000000000000000000000000..112fbc43565d4fd6bc5cdf61820c7f6f26e41d98
GIT binary patch
literal 1914
zcmbVNe@qis94`uDp&}})xMazBj7^a1U9Y93Hw&vR(h5aZaiU{euXnF-qwUqZ!?sMP
zb92M_+lge04x)}_x)=z~k!Uu5p!*?Hrhg2l#>tEcDr%-iH^<z&0*!8NW?u5{y?gKT
zKHuNpTTxb8G$!fEB!xmT#$mU);5<nlqesDaXWw!LPRgKto~TeHPmo8P;=|493PpmN
zE3c3$oFx>)`!zJndw?eF4??s;F|8mRq?sBZAs$f01<dHRy<edS$C}Z(xlY0vw1R5R
zUMGOrb*1G@T@7Pm(Sm$rT9|?aejw3E*zXI7RM?D0c`3M-w{aASLZliqYLNvZ70xom
z$_oH7Xb6lU2of=xG+KjRZy<6Ik{}73$i=lJrZrH6p3)kTp$CQ11lCKrY%_*r!7npf
zElEKN$3vlzCZyBwLKUtxnM^oA;v|Vd1SUoT5*@|@V#Y9o4Ty}u1tpFTATlHE;cF!`
z3N;-x!5@s#2E-vZL5JaCI*4mEgltk2$TBfpuvYLzg|iF}e83L^k_fTd7&chVOT1Xk
z{|j~O_yGaXwN7VD#zS@S`(q+Rsc<1QW5^*7MT_N;Ai!Nf<ZA^66fT5nX2{kADXRcz
zi5JRw-ZvbmvSF1GQmY}6DRa31%ZJ3Q`z`<*EdetMqo&6QBSz}VwFH$*P<nDIkw+24
zAk@jToHz1MsFos0O7|cXrVL9<^drG6LwR|@PeX$_KV1dzV4w;`Vs50YypI>4V5pt$
z{(XnlS|;#b&Ib=fSJ8CDQD`-2O$Gx-YP3;xoleRT5G6Xm0Ef+tLg#2Wj-^Zt4QNju
zz)ZO&9i{_%2BSTI#=I<%>m~JoG--2(@7s8$R!)K8`|SU`KTF_X3DUmD=8+3i&K=6m
zi7={>q0*TR77VR?91=|zie}_8Fr$ndf54(c+uUP&V30Oc4It@%<i#LN<h@de7J#J+
zdh3yShePFYxnKwF!2fPy^z6Rk9)`n?AunUC3Vy_z9SFb<C%{&gr5~N8P>e`&*evDt
z75$sqYSJueN0yvB^GwC5-wS$_eK{rTlhqcVe)@?@W@^R!o_WjDJWG}<H!N*f)?+)N
z+@$^_QK_74YF)9qzVS*|Ra<*wrM;vx-nOW9-`P{QFW&yr*na3c!$kl2gUWkp+dFQl
za@IAUzmz?G75i%XA0ssh=}){JpAp%Ycj59r^gwklO^i*wv43Unh@_@cPkuTvYuw!9
zdtb)fTy^KFEluNf$-Bq7zxnei@6}4=ok{LDcNE%@leN8T+{Uv0)|&m>t{nI6s7!9J
zD6pqGjaL_lyV)=5Q&ZQD+qr*2SEBn@W8O(a|NJ#O)crT_me|@qRi(tY#5anr$v4y;
zi$^_wv~|06gKEowIq-BlHm7)Gs)s#w{o|BlO<l$AOPzg(b6U1ED&}PGDevz5?6N&v
zpDDJnC%Sh|OgXtOf_1#E@*MG=Uz(_{$xeT^`?*~$h-K!YlDqoMg(;4&TQ{F}74vZ`
zixg+yXy)1uC==^mC^{-l`JlC;p@Xy&{WF?3-g%E3`}x5uHZ9$g|I^mVnQ!gQz9i~@
z+}5X><GNni+t6-{vq-7NyaYn^t(rDl+T)r=CERURDYy2_Y?<U9*!bJpcP||H$lY~u
zpnK(OFYUUO@yic4OJ`p%w(q$%{{8xfxI@y>4K3f#SZo`}itjT1oZq{e&TKf7(H40z
jA@T6Qz4doaBL#7F=Z@WYrDgtD`S0i`EVb>L?q2p6CIz9f
literal 0
HcmV?d00001
diff --git a/static/img/index/tips.png b/static/img/index/tips.png
new file mode 100644
index 0000000000000000000000000000000000000000..efeec9ab25730cd350fcacb64c957498df970fe5
GIT binary patch
literal 338
zcmV-Y0j>UtP)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG00001b5ch_0Itp)
z=>Px$3`s;mR47xGlFdrPP!NUB>5m4aD{Dc}mTH57F0=Isd<9+W%K9j})3v^WPav@c
zvr808L`j7%YNZ;5UJ>p{td-ju7d^|F`Q{Gi9^yw~7|uRFseK4`1l&x@gaiVd6-(Bs
zZQCEi8UXL|ru>=F7vykoQX&%Mb!OYy+GsP`-0Lduzu^&_K*f^fu;Ka#B#+Il`I#J6
zYGt%;?<XFULpELi8l+=(vbih@g*m+R<8eU5W5W#wBrLPDTv<dMzvH$4HU@}5r2^H}
zB}5M$Xs!POX(!dzD!6M!X?A&RUio!^M`qVvui`Q4Kn=dF|CNZ;r?++Lk29mu>#98h
kyJj>%oX;;<C!=V50p?qV-o2iK*8l(j07*qoM6N<$f(P!Cr2qf`
literal 0
HcmV?d00001