Skip to content

U
uni-pdtravel
Commit 34e173bf authored by zhoucong's avatar zhoucong
Browse files
Options

vlog相册界面优化

parent efbb4c50
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 38 deletions
pages/vlog/components/dragImg/dragImg.vue
View file @ 34e173bf
......@@ -455,7 +455,7 @@
color: #fff;
text-align: center;
line-height: 50rpx;
font-size: 20rpx;
font-size: 18rpx;
}
}
......
pages/vlog/orderPay/orderPay.vue
View file @ 34e173bf
......@@ -31,9 +31,7 @@
<view class="price">
￥{{allprice | money}}
</view>
<view class="confirm">
<u-button type="success" style="background-color: red;" @click="confirm">确认订单</u-button>
</view>
<view class="confirm" @click="confirm">确认订单</view>
</view>
</view>
</template>
......@@ -128,6 +126,12 @@
orderId: res.data.id
})
uni.hideLoading();
}else{
uni.showModal({
showCancel: false,
title: '提示',
content: res.message,
});
}
})
},
......@@ -275,6 +279,8 @@
}
.bottom {
border-top: 1upx solid #e8e8e8;
height: 98upx;
position: fixed;
bottom: 0;
width: 100%;
......@@ -290,11 +296,14 @@
}
.confirm {
height: 98upx;
background-color: #FFE600;
width: 200upx;
font-size: 32upx;
line-height: 98upx;
font-weight: bold;
float: right;
text-align: center;
border-radius: 10upx;
}
.price {
......
pages/vlog/pictureFormat/pictureFormat.vue
View file @ 34e173bf
......@@ -4,7 +4,7 @@
<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
</view>
<view class="top">
<dragImg :alternateImages="alternateImages" :listData="imgList" @change="changeImgList" :columns="4"></dragImg>
<dragImg :alternateImages="alternateImages" :listData="imgList" @change="changeImgList" :columns="3"></dragImg>
</view>
<view class="bottom" @click="next">
下一步
......@@ -85,10 +85,10 @@
color: #ABABAB;
background-color: #fff;
position: fixed;top: 0;z-index: 10;
border-bottom: 1upx dashed #ccc;
}
.top{
margin-top: 50rpx;
border-top: 1px dashed #ccc;
margin-bottom: 100rpx;
}
.bottom{position: fixed;bottom: 0;width: 100%;height: 100rpx;background-color:#FFE600;right: 0;line-height: 100rpx;font-size: 32rpx;font-weight: bold;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;z-index: 10;text-align: center;}
......
pages/vlog/productDetails/productDetails.vue
View file @ 34e173bf
......@@ -17,7 +17,7 @@
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" style="width: 100%;height: 15rpx;"></image>
<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
<view style="display: flex;justify-content: space-around;margin-bottom: 20upx;width: 75%;margin: 20upx auto;">
<button type="default" class="btnn" :class="current===0?'active':'noactive'"
@click="current=0">封面</button>
<button type="default" class="btnn" :class="current===1?'active':'noactive'"
......@@ -25,10 +25,10 @@
</view>
<view v-if="current===0">
<view class="cover">
<view class="coverItem" v-for="(item,index) in imgList2" :key="index">
<view class="coverItem1" v-for="(item,index) in imgList2" :key="index">
<image class="img" :src="item.url" @click="changeCover(item.url)"></image>
<u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF"
size="50"></u-icon>
<image v-if="cover===item.url" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
<!-- <u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon> -->
</view>
</view>
</view>
......@@ -36,8 +36,8 @@
<view class="cover">
<view class="coverItem" v-for="(item,index) in imgList3" :key="index">
<image class="img" :src="item.url" @click="changeinsidePages(item.url)"></image>
<u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF"
size="50"></u-icon>
<image v-if="insidePages===item.url" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
<!-- <u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon> -->
</view>
</view>
</view>
......@@ -46,8 +46,7 @@
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
<image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index"
style="width: 100%;border-radius: 10rpx;"></image>
<image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index" style="width: 100%;border-radius: 10rpx;"></image>
<view class="bottom" @click="beginMaking">上传照片制作</view>
</view>
<view v-else>
......@@ -158,19 +157,22 @@
.item {
display: flex;
justify-content: space-between;
padding: 30rpx 20rpx 20rpx 20rpx;
padding: 15rpx 56rpx 52rpx 15rpx;
image {
width: 48%;
height: 220rpx;
width: 412rpx;
height: 288rpx;
border-radius: 10rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
}
.title {
color: #999999;
font-size: 28upx;
width: 48%;
height: 220rpx;
padding-top: 10rpx;
margin-top: 20rpx;
margin-top: 60rpx;
}
}
......@@ -191,13 +193,15 @@
.cover {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: space-around;
padding-bottom: 40upx;
.coverItem {
width: 48.5%;
height: 220rpx;
width: 328upx;
height: 231upx;
position: relative;
padding-top: 20rpx;
margin-top: 20rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
.img {
width: 100%;
......@@ -206,9 +210,33 @@
}
.icon {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 10rpx;
right: 10rpx;
}
}
.coverItem1 {
width: 556upx;
height: 396upx;
margin: 0 auto;
position: relative;
margin-top: 20rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 25rpx;
right: 5rpx;
top: 10rpx;
right: 10rpx;
}
}
}
......@@ -217,11 +245,11 @@
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
height: 98rpx;
background-color: #FFE600;
right: 0;
line-height: 100rpx;
font-size: 32rpx;
font-size: 36rpx;
font-weight: bold;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
......@@ -230,10 +258,10 @@
.btnn {
background-color: #ECF4FF;
width: 25%;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
width: 180upx;
height: 64rpx;
line-height: 64rpx;
font-size: 28rpx;
}
.active {
......
pages/vlog/uploadPictures/uploadPictures.vue
View file @ 34e173bf
......@@ -13,8 +13,8 @@
<block v-for="(item,index) in imgList" :key="index">
<view class="imgItem" @click="changeImg(item,index)">
<image :src="imgUrl+item.url"></image>
<u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50">
</u-icon>
<image v-if="item.check===1" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
<!-- <u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon> -->
</view>
</block>
</view>
......@@ -196,11 +196,13 @@
display: inline-block;
border-radius: 15rpx;
background-color: #FFE600;
width: 150rpx;
height: 60rpx;
line-height: 60rpx;
width: 180rpx;
height: 64rpx;
line-height: 64rpx;
margin-top: 70rpx;
margin-left: 200rpx;
font-size: 28upx;
font-weight: bold;
}
}
......@@ -222,8 +224,10 @@
.icon {
position: absolute;
top: 10rpx;
right: 10rpx;
top: 15rpx;
right: 15rpx;
width: 40rpx;
height: 40rpx;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment