Skip to content

G
get-up-early
Commit 68207f8f by baihong
Options

add:签到活动详情页

parent ccd14264
Showing with 184 additions and 118 deletions
pages/upload/upload.vue
...@@ -43,8 +43,11 @@ ...@@ -43,8 +43,11 @@
<text>day1</text> <text>day1</text>
</view> </view>
</view> </view>
<view class="wrap">
<u-swiper :list="list" indicator-pos="topRight" height='800'></u-swiper>
</view>
<view class="main"> <view class="main">
<view class="img-box"> <view class="img-box" v-if="false">
<image src="../../static/imgs/ic_upload@2x.png" mode=""></image> <image src="../../static/imgs/ic_upload@2x.png" mode=""></image>
<text>上传图标</text> <text>上传图标</text>
</view> </view>
...@@ -58,126 +61,150 @@ ...@@ -58,126 +61,150 @@
export default { export default {
data() { data() {
return { return {
active: false,
list: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
}; };
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app { .app {
.main {
display: flex;
align-items: center;
flex-direction: column;
.btns{
width: 590rpx;
height: 74rpx;
border-radius: 8rpx;
border: 1rpx solid #555555;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.yellow {
border: none;
background-color: #FFC915;
margin-top: 30rpx;
}
.img-box {
width: 660rpx;
height: 345rpx;
margin-top: 33rpx;
margin-bottom: 70rpx;
background: #F4F4F4;
border-radius: 9rpx;
border: 1rpx dashed #999999;
display: flex;
align-items: center;
flex-direction: column;
image{
width: 121rpx;
height: 94rpx;
margin-bottom: 21rpx;
margin-top: 99rpx;
}
text{
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 33rpx;
}
}
}
.days {
display: flex;
padding: 42rpx;
margin-bottom: 20rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
.line { .wrap {
width: 60rpx; padding: 40rpx;
height: 3rpx; }
background: #DCDCDC; .main {
margin-top: 30rpx; display: flex;
} align-items: center;
flex-direction: column;
.day-box {
display: flex; .btns {
flex-direction: column; width: 590rpx;
align-items: center; height: 74rpx;
position: relative; border-radius: 8rpx;
min-height: 74rpx; border: 1rpx solid #555555;
justify-content: flex-end; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
.cor { font-weight: 600;
width: 40rpx; color: #000000;
height: 40rpx; line-height: 40rpx;
background: #FFFFFF; display: flex;
border: 1rpx solid #FF1130; align-items: center;
font-size: 18rpx; justify-content: center;
font-family: OpenSans; }
color: #FF1130;
line-height: 24rpx; .yellow {
border-radius: 50%; border: none;
display: flex; background-color: #FFC915;
align-items: center; margin-top: 30rpx;
justify-content: center; }
position: absolute;
right: -16rpx; .img-box {
top: -36rpx; width: 660rpx;
} height: 345rpx;
margin-top: 33rpx;
.tip { margin-bottom: 70rpx;
width: 71rpx; background: #F4F4F4;
height: 48rpx; border-radius: 9rpx;
font-size: 22rpx; border: 1rpx dashed #999999;
font-family: OpenSans; display: flex;
color: #333333; align-items: center;
background-image: url(../../static/imgs/ic_number_01@2x.png); flex-direction: column;
background-repeat: no-repeat;
background-size: cover; image {
display: flex; width: 121rpx;
align-items: center; height: 94rpx;
justify-content: center; margin-bottom: 21rpx;
} margin-top: 99rpx;
}
image {
width: 54rpx; text {
height: 54rpx; font-size: 24rpx;
} font-weight: 400;
color: #999999;
text { line-height: 33rpx;
font-size: 24rpx; }
font-family: OpenSans; }
color: #555555; }
line-height: 33rpx;
} .days {
} display: flex;
} padding: 42rpx;
} margin-bottom: 20rpx;
background-color: #FFFFFF;
.line {
width: 60rpx;
height: 3rpx;
background: #DCDCDC;
margin-top: 30rpx;
}
.day-box {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-height: 74rpx;
justify-content: flex-end;
.cor {
width: 40rpx;
height: 40rpx;
background: #FFFFFF;
border: 1rpx solid #FF1130;
font-size: 18rpx;
font-family: OpenSans;
color: #FF1130;
line-height: 24rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: -16rpx;
top: -36rpx;
}
.tip {
width: 71rpx;
height: 48rpx;
font-size: 22rpx;
font-family: OpenSans;
color: #333333;
background-image: url(../../static/imgs/ic_number_01@2x.png);
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
image {
width: 54rpx;
height: 54rpx;
}
text {
font-size: 24rpx;
font-family: OpenSans;
color: #555555;
line-height: 33rpx;
}
}
}
}
</style> </style>
uview-ui/components/u-swiper/u-swiper.vue
...@@ -20,6 +20,18 @@ ...@@ -20,6 +20,18 @@
}, titleStyle]"> }, titleStyle]">
{{ item.title }} {{ item.title }}
</view> </view>
<view class="tips">I,will smith ,want to stick to the idea of seven days of smiling life.Witness for me!</view>
<view class="btns">
<view class="item">
<image src="../../../static/imgs/ic_shu@2x.png" mode=""></image>
<text>233</text>
</view>
<view class="item" style="margin-right: 0;">
<image style="width: 27rpx;height: 27rpx;" src="../../../static/imgs/ic_good@2x.png" mode=""></image>
<text>233</text>
</view>
</view>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -232,7 +244,33 @@ ...@@ -232,7 +244,33 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.btns {
display: flex;
justify-content: flex-end;
.item{
display: flex;
align-items: center;
margin-right: 67rpx;
image{
width: 30rpx;
height: 23rpx;
margin-right: 10rpx;
}
text{
font-size: 26rpx;
font-family: OpenSans;
color: #555555;
line-height: 36rpx;
}
}
}
.tips{
font-size: 24rpx;
font-family: OpenSans;
color: #333333;
line-height: 36rpx;
margin: 10rpx 0 28rpx 0;
}
.u-swiper-wrap { .u-swiper-wrap {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
...@@ -242,7 +280,7 @@ ...@@ -242,7 +280,7 @@
.u-swiper-image { .u-swiper-image {
width: 100%; width: 100%;
will-change: transform; will-change: transform;
height: 100%; height: 80%;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
...@@ -319,6 +357,7 @@ ...@@ -319,6 +357,7 @@
overflow: hidden; overflow: hidden;
box-sizing: content-box; box-sizing: content-box;
position: relative; position: relative;
background-color: #FFFFFF;
} }
.u-swiper-title { .u-swiper-title {
......
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