From 1aaddc3e607b65f957f754f915b3bbb9ca062990 Mon Sep 17 00:00:00 2001 From: JING Date: Tue, 16 Jul 2024 18:38:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/user/index.vue | 300 ++++++++++++++++++++++--------------------- 1 file changed, 156 insertions(+), 144 deletions(-) diff --git a/pages/user/index.vue b/pages/user/index.vue index 4008972..838b761 100644 --- a/pages/user/index.vue +++ b/pages/user/index.vue @@ -49,6 +49,7 @@ + + + + + + + + 港风复古 + + + + 生成中... + + + + + + + + + + + 港风复古 + + + + + + + + + + + + + + + + 一寸照 + 25×35mm | 295×413px + + + + 生成中... + + + + + + + + + 一寸照 + 25×35mm | 295×413px + + + + + + + + @@ -107,7 +170,8 @@ export default { }, { name: '卡通风格' } - ] + ], + current:0, }; }, @@ -176,7 +240,9 @@ export default { //选项卡选择 tabChange(e) { + var _this =this; console.log(e); + _this.current = e.index; }, tools(item) { @@ -324,25 +390,7 @@ border: 1rpx solid #00F0E2; margin-left: 20rpx;} height: 50rpx; color: #333333; font-size: 28rpx; line-height: 50rpx; text-align: center;} .userInfo .uright .change image{ width: 42rpx; height: 42rpx; margin-top: 40rpx;} - .userItem{ - color: #333333; - width: 100%; - height: auto; - display: flex; - } - .uItemBox{ width:50%; text-align: center;} - .uItemBox .num{ - font-size: 40rpx; - font-family: DIN, DIN; - font-weight: bold; - } - .uItemBox .text{ - font-size: 24rpx; - font-family: PingFang SC, PingFang SC; - font-weight: 400; - line-height: 28rpx; - } - + .boxBg{ width: 702rpx; height: 160rpx; @@ -376,150 +424,114 @@ height: 50rpx; .mright{width: 50%; height: 160rpx; display: flex;} .mbItem{ width: 80rpx; height: 80rpx; margin: 40rpx auto;} .mbItem image{width: 80rpx; height: 80rpx; } - /*订单部分*/ - - .orderBox{ - width: 670rpx; - height: auto; - background: #082436; - border-radius: 24rpx 24rpx 24rpx 24rpx; - opacity: 1; - margin: 0rpx auto; - padding: 20rpx; - } - .orderBoxTitle{ - font-size: 28rpx; - font-weight: bold; - color:#FFFFFF; - line-height: 60rpx; - } + + .nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;} + .empty{width: 100%; height: 20rpx;} - .orderItem{ - width: 100%; height: auto; - display: flex; - text-align: center; - } - .oItemBox{ - width: 33.33%; - - } - .oItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;} - .oItemBox .image image{width: 64rpx; height: auto; margin: 0rpx auto; } - .oItemBox .order_text{ + .newBtn{ + width: 400rpx; + height: 88rpx; + line-height: 88rpx; + border-radius: 48rpx; + border: 2rpx solid #9B75FF; text-align: center; - font-size: 24rpx; - font-weight: 400; - line-height: 30rpx; - color: #FFFFFF; + margin: 20rpx auto; + color: #9B75FF; + font-size: 30rpx; + font-weight: bold; } - - /*收入部分*/ - - .moneyBox{ - width: 670rpx; - height: auto; - background: #082436; + .datalist{ width: 100%; height: auto;} + .picBox{ + width: 702rpx; + height: 160rpx; + background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; - opacity: 1; margin: 20rpx auto; - padding: 20rpx; + display: flex; } - .moneyBoxTitle{ - font-size: 28rpx; - font-weight: bold; - color:#FFFFFF; - line-height: 40rpx; + .picBox .p_left{ width: 112rpx; height: 112rpx; margin: 24rpx 24rpx; position: relative;} + .picBox .p_left .p_bg{ + width: 100%; + height: 100%; + position:absolute; + background-size:100% 100%; + border-radius:20rpx; } - - .moneyBoxItem{ - margin-top: 20rpx; - width: 100%; height: auto; - display: flex; - text-align: center; - gap:20rpx; + .picBox .p_left .p_pic{ + width: 100%; + height: 100%; + position:absolute; + z-index: 2; + opacity: 0.8; + border-radius:20rpx; } - .mItemBox{ - width: 152rpx; - height: 128rpx; - background: linear-gradient(180deg, rgba(49,156,255,0) 0%, rgba(0,255,240,0.5) 100%); - border-radius: 16rpx 16rpx 16rpx 16rpx; - opacity: 1; - border: 1rpx solid #00F0E2; - - + .picBox .p_center{ width: 342rpx; height: 160rpx; line-height: 160rpx; } + .picBox .p_center .p_title{ + font-weight: 400; + font-size: 28rpx; + color: #333333; } - .mItemBox .money{ width: 100%; text-align: center; color: #FFFFFF; line-height: 80rpx;} - .mItemBox .money .unit{ font-size: 24rpx; -font-family: PingFang SC, PingFang SC; -font-weight: bold;} - .mItemBox .money .num{ font-size: 30rpx; -font-family: DIN, DIN; -font-weight: 400; -} - .mItemBox .order_text{ - text-align: center; - font-size: 24rpx; + .picBox .p_right{width: 200rpx;height: 160rpx;} + .picBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;} + .picBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;} + .picBox .p_right .distance .ing{ + height: auto; font-weight: 400; - line-height: 30rpx; - color: #FFECAA; + font-size: 24rpx; + color: #FF4F34; + line-height: 34rpx; + margin: 65rpx 24rpx auto auto; } - - - -/*服务*/ - .serviceBox{ - width: 670rpx; - height: auto; - background: #082436; + .imgBox{ + width: 702rpx; + height: 160rpx; + background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; - opacity: 1; margin: 20rpx auto; - padding: 20rpx; + display: flex; } - .serviceBoxTitle{ - font-size: 28rpx; - font-weight: bold; - color:#FFFFFF; - line-height: 60rpx; + .imgBox .p_left{ width: 72rpx; height: 72rpx; margin: 44rpx 24rpx 44rpx 24rpx; position: relative;} + .imgBox .p_left .p_bg{ + width: 100%; + height: 100%; + position:absolute; + background-size:100% 100%; + border-radius:20rpx; } - - .serviceItem{ - width: 100%; height: auto; - display: flex; - text-align: center; - flex-wrap:wrap; + .imgBox .p_left .p_pic{ + width: 100%; + height: 100%; + position:absolute; + z-index: 2; + opacity: 0.8; + border-radius:20rpx; } - .sItemBox{ - width: 25%; - + .imgBox .p_center{ width: 362rpx; height: 160rpx; } + .imgBox .p_center .p_title{ + font-weight: 400; + font-size: 28rpx; + color: #333333; + line-height: 80rpx; + margin-top: 20rpx; } - .sItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;} - .sItemBox .image image{width: 48rpx; height: auto; margin: 0rpx auto; } - .sItemBox .order_text{ - text-align: center; - font-size: 24rpx; + .imgBox .p_center .p_desc{ font-weight: 400; - line-height: 30rpx; - color: #FFFFFF; + font-size: 24rpx; + color: #999999; + line-height: 40rpx; } - .nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;} - .empty{width: 100%; height: 20rpx;} - - .newBtn{ - width: 400rpx; - height: 88rpx; - line-height: 88rpx; - border-radius: 48rpx; - border: 2rpx solid #9B75FF; - text-align: center; - margin: 20rpx auto; - color: #9B75FF; - font-size: 30rpx; - font-weight: bold; + .imgBox .p_right{width: 200rpx;height: 160rpx;} + .imgBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;} + .imgBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;} + .imgBox .p_right .distance .ing{ + height: auto; + font-weight: 400; + font-size: 24rpx; + color: #FF4F34; + line-height: 34rpx; + margin: 65rpx 24rpx auto auto; } - -