You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
6.1 KiB
307 lines
6.1 KiB
<template>
|
|
<view class="container">
|
|
|
|
<view class="ant-banner-box ">
|
|
<image class="ant-banner" mode="aspectFill" src=""/>
|
|
<view class="ant-banner-card ">
|
|
<image class="ant-banner-header" mode="aspectFill" src="https://img0.baidu.com/it/u=1429435380,946942033&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
|
|
<view class="ant-banner-panl">
|
|
<view class="ant-banner-name">和平发展</view>
|
|
<view class="ant-banner-tag">成长值857</view>
|
|
</view>
|
|
</view>
|
|
<view class="ant-card">
|
|
<view class="ant-art-font">SVIP</view>
|
|
<view class="ant-art-span">开团 VIP 会员享受超多便捷服务</view>
|
|
<view class="ant-art-more">查看更多</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="ant-home-content">
|
|
<view class="ant-menu-card">
|
|
<view class="ant-flex-line">
|
|
<view class="ant-icon-menu">
|
|
<view class="ant-icon-menu-box">
|
|
<view class="ant-icon"></view>
|
|
<view class="ant-text">足迹</view>
|
|
</view>
|
|
</view>
|
|
<view class="ant-icon-menu">
|
|
<view class="ant-icon-menu-box">
|
|
<view class="ant-icon"></view>
|
|
<view class="ant-text">收藏</view>
|
|
</view>
|
|
</view>
|
|
<view class="ant-icon-menu">
|
|
<view class="ant-icon-menu-box">
|
|
<view class="ant-icon"></view>
|
|
<view class="ant-text">关注</view>
|
|
</view>
|
|
</view>
|
|
<view class="ant-icon-menu">
|
|
<view class="ant-icon-menu-box">
|
|
<view class="ant-icon"></view>
|
|
<view class="ant-text">在聊</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="ant-pand-item-box">
|
|
<view class="ant-flex-line" v-for="i in 5">
|
|
<view class="ant-icon-image"></view>
|
|
<view class="ant-pand-item">
|
|
我的足迹
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="content-end">
|
|
<view class="line"/>
|
|
<view class="center">瀚海黎明技术支持</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
|
|
.ant-menu-card{
|
|
top: -40rpx;
|
|
z-index: 1;
|
|
margin: 0 24rpx;
|
|
width: calc(100vw - 96rpx);
|
|
border-radius: 16rpx;
|
|
min-height: 100rpx;
|
|
padding: 24rpx;
|
|
|
|
.ant-icon-menu{
|
|
width: 150rpx;
|
|
flex: 1;
|
|
|
|
.ant-icon-menu-box{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
padding: 20rpx;
|
|
border-radius: 20rpx;
|
|
margin: 10rpx auto;
|
|
background: linear-gradient(180deg, #f7f7fc -10%, #ffffff);
|
|
box-shadow: 8rpx 8rpx 20rpx rgba(134, 136, 136, 0.2);
|
|
|
|
.ant-icon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin: 8rpx auto;
|
|
border-radius: 12rpx;
|
|
border: 1rpx dashed #ccc;
|
|
}
|
|
|
|
.ant-text{
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #222;
|
|
font-weight: bolder;
|
|
line-height: 42rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-banner-box{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
.ant-banner{
|
|
width: 100vw;
|
|
height: 480rpx;
|
|
background: radial-gradient(circle farthest-side at top left,
|
|
rgb(65,117,255) 0, rgb(92,221,224) 20%,
|
|
rgb(65,117,255) 60%, rgb(61,221,209) 100%)
|
|
}
|
|
|
|
.ant-banner-card{
|
|
position: fixed;
|
|
top: 140rpx;
|
|
left: 42rpx;
|
|
display: flex;
|
|
|
|
.ant-banner-header{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx solid #FFF;
|
|
}
|
|
|
|
.ant-banner-panl{
|
|
padding: 10rpx 30rpx;
|
|
|
|
.ant-banner-name{
|
|
font-weight: bolder;
|
|
color: #FFF;
|
|
font-size: 34rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.ant-banner-tag{
|
|
background-color: rgba(255, 255, 255, .4);
|
|
width: 120rpx;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
border-radius: 40rpx;
|
|
color: #FFF;
|
|
font-size: 22rpx;
|
|
padding: 5rpx 20rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ant-card{
|
|
padding: 24rpx;
|
|
width: calc(100vw - 72rpx - 48rpx);
|
|
height: 160rpx;
|
|
background: linear-gradient(155deg,
|
|
rgb(22,24,184), rgb(77, 78, 255), rgb(26,83,204));
|
|
border-top-left-radius: 42rpx;
|
|
border-top-right-radius: 42rpx;
|
|
position: absolute;
|
|
bottom: -20rpx;
|
|
left: 36rpx;
|
|
}
|
|
|
|
.ant-art-font{
|
|
font-size: 48rpx;
|
|
font-weight: bolder;
|
|
padding: 25rpx 20rpx 0;
|
|
}
|
|
.ant-art-span{
|
|
font-size: 24rpx;
|
|
padding: 10rpx 20rpx 10rpx;
|
|
}
|
|
.ant-art-more{
|
|
font-size: 24rpx;
|
|
padding: 10rpx 20rpx 10rpx;
|
|
position: absolute;
|
|
top: 50rpx;
|
|
right: 40rpx;
|
|
}
|
|
.ant-art-more::after{
|
|
content: "";
|
|
position: absolute;
|
|
top: 17.5rpx;
|
|
right: 6rpx;
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-bottom: 1rpx solid #FFF;
|
|
border-right: 1rpx solid #FFF;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
.ant-home-content{
|
|
width: 100vw;
|
|
min-height: calc(100vh - 460rpx);
|
|
background: linear-gradient(0deg, rgb(255,255,255), rgb(224,224,250), rgb(249, 249, 252));
|
|
position: absolute;
|
|
top: 460rpx;
|
|
margin-bottom: 100rpx;
|
|
|
|
.ant-pand-item-box{
|
|
width: calc(100vw - 186rpx);
|
|
min-height: 400rpx;
|
|
background: #fff;
|
|
border-radius: 18rpx;
|
|
margin: 10rpx auto;
|
|
padding: 36rpx;
|
|
color: #000;
|
|
font-weight: bolder;
|
|
|
|
.ant-flex-line{
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
position: relative;
|
|
|
|
.ant-icon-image{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 12rpx;
|
|
border: 1rpx dashed #ccc;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.ant-flex-line:last-of-type{
|
|
border-bottom: 0 !important;
|
|
}
|
|
|
|
.ant-flex-line::after{
|
|
content: "";
|
|
position: absolute;
|
|
top: 62rpx;
|
|
right: 15rpx;
|
|
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-bottom: 2rpx solid;
|
|
border-right: 2rpx solid;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.ant-home-content::after{
|
|
content: " ";
|
|
position: absolute;
|
|
top: -1rpx;
|
|
left: calc(50vw - 25rpx);
|
|
width: 50rpx;
|
|
height: 25rpx;
|
|
background-color: #454ff7;
|
|
clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
|
|
-webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
banner: {url:''},
|
|
information: [],
|
|
id: ''
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
console.log("reach bottom")
|
|
},
|
|
methods: {
|
|
toUri(uri) {
|
|
uni.navigateTo({url: uri})
|
|
},
|
|
getImageUrl(uri){
|
|
return baseUrl + "/" + uri;
|
|
},
|
|
getDayString(str){
|
|
return str.substr(0, 16)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|