jgl
/
photo_uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新界面

Browse Source
main
JING 9 months ago
parent 72414cbde8
commit 1aaddc3e60
1 changed files with 156 additions and 144 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 296
      pages/user/index.vue

296
pages/user/index.vue
Unescape View File

@ -49,6 +49,7 @@
<u-tabs :list="tabList" <u-tabs :list="tabList"
lineWidth="30" lineWidth="30"
lineColor="#9B75FF" lineColor="#9B75FF"
:current="current"
:activeStyle="{ :activeStyle="{
color: '#000000', color: '#000000',
fontWeight: 'bold', fontWeight: 'bold',
@ -58,11 +59,73 @@
color: '#000000', color: '#000000',
transform: 'scale(1)' transform: 'scale(1)'
}" }"
itemStyle="padding-left: 20rpx; padding-right: 20rpx; width:147rpx; height: 68rpx;" itemStyle="padding-left: 15rpx; padding-right: 15rpx; width:157rpx; height: 68rpx;"
@click="tabChange"></u-tabs> @click="tabChange"></u-tabs>
<view class="datalist"> <view class="datalist">
<view class="picBox">
<view class="p_left">
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
<image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
</view>
<view class="p_center">
<view class="p_title">港风复古</view>
</view>
<view class="p_right">
<view class="distance">
<view class="ing">生成中...</view>
</view>
</view>
</view>
<view class="picBox">
<view class="p_left">
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
</view>
<view class="p_center">
<view class="p_title">港风复古</view>
</view>
<view class="p_right">
<view class="distance">
<image src="/static/img/index/right.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="imgBox">
<view class="p_left">
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
<image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
</view>
<view class="p_center">
<view class="p_title">一寸照</view>
<view class="p_desc">25×35mm | 295×413px</view>
</view>
<view class="p_right">
<view class="distance">
<view class="ing">生成中...</view>
</view>
</view>
</view>
<view class="imgBox">
<view class="p_left">
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
</view>
<view class="p_center">
<view class="p_title">一寸照</view>
<view class="p_desc">25×35mm | 295×413px</view>
</view>
<view class="p_right">
<view class="distance">
<image src="/static/img/index/right.png" mode="widthFix"></image>
</view>
</view>
</view>
</view> </view>
@ -107,7 +170,8 @@ export default {
}, { }, {
name: '卡通风格' name: '卡通风格'
} }
] ],
current:0,
}; };
}, },
@ -176,7 +240,9 @@ export default {
//选项卡选择 //选项卡选择
tabChange(e) tabChange(e)
{ {
var _this =this;
console.log(e); console.log(e);
_this.current = e.index;
}, },
tools(item) tools(item)
{ {
@ -324,24 +390,6 @@ border: 1rpx solid #00F0E2; margin-left: 20rpx;}
height: 50rpx; height: 50rpx;
color: #333333; font-size: 28rpx; line-height: 50rpx; text-align: center;} color: #333333; font-size: 28rpx; line-height: 50rpx; text-align: center;}
.userInfo .uright .change image{ width: 42rpx; height: 42rpx; margin-top: 40rpx;} .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{ .boxBg{
width: 702rpx; width: 702rpx;
@ -376,150 +424,114 @@ height: 50rpx;
.mright{width: 50%; height: 160rpx; display: flex;} .mright{width: 50%; height: 160rpx; display: flex;}
.mbItem{ width: 80rpx; height: 80rpx; margin: 40rpx auto;} .mbItem{ width: 80rpx; height: 80rpx; margin: 40rpx auto;}
.mbItem image{width: 80rpx; height: 80rpx; } .mbItem image{width: 80rpx; height: 80rpx; }
/*订单部分*/
.orderBox{ .nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;}
width: 670rpx; .empty{width: 100%; height: 20rpx;}
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;
}
.orderItem{
width: 100%; height: auto;
display: flex;
text-align: center;
}
.oItemBox{
width: 33.33%;
} .newBtn{
.oItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;} width: 400rpx;
.oItemBox .image image{width: 64rpx; height: auto; margin: 0rpx auto; } height: 88rpx;
.oItemBox .order_text{ line-height: 88rpx;
border-radius: 48rpx;
border: 2rpx solid #9B75FF;
text-align: center; text-align: center;
font-size: 24rpx; margin: 20rpx auto;
font-weight: 400; color: #9B75FF;
line-height: 30rpx; font-size: 30rpx;
color: #FFFFFF; font-weight: bold;
} }
.datalist{ width: 100%; height: auto;}
/*收入部分*/ .picBox{
width: 702rpx;
.moneyBox{ height: 160rpx;
width: 670rpx; background: #FFFFFF;
height: auto;
background: #082436;
border-radius: 24rpx 24rpx 24rpx 24rpx; border-radius: 24rpx 24rpx 24rpx 24rpx;
opacity: 1;
margin: 20rpx auto; margin: 20rpx auto;
padding: 20rpx; display: flex;
} }
.moneyBoxTitle{ .picBox .p_left{ width: 112rpx; height: 112rpx; margin: 24rpx 24rpx; position: relative;}
font-size: 28rpx; .picBox .p_left .p_bg{
font-weight: bold; width: 100%;
color:#FFFFFF; height: 100%;
line-height: 40rpx; position:absolute;
background-size:100% 100%;
border-radius:20rpx;
} }
.picBox .p_left .p_pic{
.moneyBoxItem{ width: 100%;
margin-top: 20rpx; height: 100%;
width: 100%; height: auto; position:absolute;
display: flex; z-index: 2;
text-align: center; opacity: 0.8;
gap:20rpx; border-radius:20rpx;
} }
.mItemBox{ .picBox .p_center{ width: 342rpx; height: 160rpx; line-height: 160rpx; }
width: 152rpx; .picBox .p_center .p_title{
height: 128rpx; font-weight: 400;
background: linear-gradient(180deg, rgba(49,156,255,0) 0%, rgba(0,255,240,0.5) 100%); font-size: 28rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx; color: #333333;
opacity: 1;
border: 1rpx solid #00F0E2;
} }
.mItemBox .money{ width: 100%; text-align: center; color: #FFFFFF; line-height: 80rpx;} .picBox .p_right{width: 200rpx;height: 160rpx;}
.mItemBox .money .unit{ font-size: 24rpx; .picBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
font-family: PingFang SC, PingFang SC; .picBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
font-weight: bold;} .picBox .p_right .distance .ing{
.mItemBox .money .num{ font-size: 30rpx; height: auto;
font-family: DIN, DIN;
font-weight: 400;
}
.mItemBox .order_text{
text-align: center;
font-size: 24rpx;
font-weight: 400; font-weight: 400;
line-height: 30rpx; font-size: 24rpx;
color: #FFECAA; color: #FF4F34;
line-height: 34rpx;
margin: 65rpx 24rpx auto auto;
} }
.imgBox{
width: 702rpx;
/*服务*/ height: 160rpx;
background: #FFFFFF;
.serviceBox{
width: 670rpx;
height: auto;
background: #082436;
border-radius: 24rpx 24rpx 24rpx 24rpx; border-radius: 24rpx 24rpx 24rpx 24rpx;
opacity: 1;
margin: 20rpx auto; margin: 20rpx auto;
padding: 20rpx; display: flex;
} }
.serviceBoxTitle{ .imgBox .p_left{ width: 72rpx; height: 72rpx; margin: 44rpx 24rpx 44rpx 24rpx; position: relative;}
font-size: 28rpx; .imgBox .p_left .p_bg{
font-weight: bold; width: 100%;
color:#FFFFFF; height: 100%;
line-height: 60rpx; position:absolute;
background-size:100% 100%;
border-radius:20rpx;
} }
.imgBox .p_left .p_pic{
.serviceItem{ width: 100%;
width: 100%; height: auto; height: 100%;
display: flex; position:absolute;
text-align: center; z-index: 2;
flex-wrap:wrap; opacity: 0.8;
border-radius:20rpx;
} }
.sItemBox{ .imgBox .p_center{ width: 362rpx; height: 160rpx; }
width: 25%; .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;} .imgBox .p_center .p_desc{
.sItemBox .image image{width: 48rpx; height: auto; margin: 0rpx auto; }
.sItemBox .order_text{
text-align: center;
font-size: 24rpx;
font-weight: 400; font-weight: 400;
line-height: 30rpx; font-size: 24rpx;
color: #FFFFFF; color: #999999;
line-height: 40rpx;
} }
.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;} .imgBox .p_right{width: 200rpx;height: 160rpx;}
.empty{width: 100%; height: 20rpx;} .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;}
.newBtn{ .imgBox .p_right .distance .ing{
width: 400rpx; height: auto;
height: 88rpx; font-weight: 400;
line-height: 88rpx; font-size: 24rpx;
border-radius: 48rpx; color: #FF4F34;
border: 2rpx solid #9B75FF; line-height: 34rpx;
text-align: center; margin: 65rpx 24rpx auto auto;
margin: 20rpx auto;
color: #9B75FF;
font-size: 30rpx;
font-weight: bold;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save