|
|
@@ -3,8 +3,194 @@
|
|
|
<view class="status_bar">
|
|
|
<!-- 这里是状态栏 -->
|
|
|
</view>
|
|
|
- <view> 状态栏下的文字 </view>
|
|
|
<view class="u-page">
|
|
|
+ <view class="head">
|
|
|
+ <view class="u-flex u-row-between" style="padding: 50rpx 30rpx">
|
|
|
+ <view class="u-flex">
|
|
|
+ <view class="">
|
|
|
+ <u-image width="130rpx" height="130rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ <view slot="error" style="font-size: 24rpx;" :fade="true" duration="450">加载失败</u-icon>
|
|
|
+ </view>
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view class="u-margin-left-10">
|
|
|
+ <view style="color: #fff;font-size: 42rpx;" class="u-margin-bottom-20">
|
|
|
+ 青岛赛轮轮胎零售店
|
|
|
+ </view>
|
|
|
+ <view style="border: 1rpx solid #E3E3E3;border-radius: 30rpx;font-size:24rpx;color:#fff;padding: 2rpx 20rpx;">
|
|
|
+ 山东省青岛市城阳区黑龙江北路188
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <u-icon name="qr" size="80rpx" custom-prefix="van-icon" color="#fff"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-around">
|
|
|
+ <view class="u-text-center">
|
|
|
+ <view style="font-size:36rpx; font-weight: 500;color: #FFFFFF;">
|
|
|
+ 张三
|
|
|
+ </view>
|
|
|
+ <view style="color: #B3DAFF;opacity: 0.9;">
|
|
|
+ 联系人
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-text-center">
|
|
|
+ <view style="font-size:36rpx;font-weight: 500;color: #FFFFFF;">
|
|
|
+ 市北区
|
|
|
+ </view>
|
|
|
+ <view style="color: #B3DAFF;opacity: 0.9;">
|
|
|
+ 区域
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="position: relative;top:-110rpx">
|
|
|
+ <u-card padding="20" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false" :border="false">
|
|
|
+ <view slot="head" class="u-flex u-row-between u-col-bottom">
|
|
|
+ <view style="font-weight: 500;font-size: 36rpx;">
|
|
|
+ 结算中心
|
|
|
+ </view>
|
|
|
+ <view class="u-col-bottom" style="color: #4B4B4B;font-size: 20rpx;">
|
|
|
+ 查看全部
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view slot="body">
|
|
|
+ <view class="u-flex u-row-around">
|
|
|
+ <view class="u-text-center">
|
|
|
+ <view style="color: #0095FF;font-size: 30rpx;">
|
|
|
+ 800 <text style="font-size: 14rpx;">万</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #333333;">
|
|
|
+ 我的奖励
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-text-center">
|
|
|
+ <view style="color: #0095FF;font-size: 30rpx;">
|
|
|
+ 800 <text style="font-size: 14rpx;">万</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #333333;">
|
|
|
+ 冻结奖励
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-text-center">
|
|
|
+ <view style="color: #0095FF;font-size: 30rpx;">
|
|
|
+ 800 <text style="font-size: 14rpx;">万</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #333333;">
|
|
|
+ 待核销
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-text-center">
|
|
|
+ <view style="color: #0095FF;font-size: 30rpx;">
|
|
|
+ 800 <text style="font-size: 14rpx;">万个</text>
|
|
|
+ </view>
|
|
|
+ <view style="color: #333333;">
|
|
|
+ 可用积分
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+ <u-card padding="20" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false" :border="false">
|
|
|
+ <view slot="head" class="u-flex u-row-between u-col-bottom">
|
|
|
+ <view style="font-weight: 500;font-size: 36rpx;">
|
|
|
+ 结算中心
|
|
|
+ </view>
|
|
|
+ <view class="u-col-bottom" style="color: #4B4B4B;font-size: 20rpx;">
|
|
|
+ 查看全部
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view slot="body">
|
|
|
+ <view class="u-flex u-row-around u-flex-wrap">
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
|
|
|
+ <view>
|
|
|
+ <u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
|
|
|
+ </u-image>
|
|
|
+ </view>
|
|
|
+ <view style="font-weight: 500;color: #000000;">
|
|
|
+ 入库明细
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+ <u-cell-group>
|
|
|
+ <u-cell-item title="核销记录">
|
|
|
+ <u-icon slot="icon" size="32" name="balance-o" custom-prefix="van-icon"></u-icon>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item title="兑换记录">
|
|
|
+ <u-icon slot="icon" size="32" name="balance-list-o" custom-prefix="van-icon"></u-icon>
|
|
|
+ </u-cell-item>
|
|
|
+ <u-cell-item icon="setting-fill" title="设置">
|
|
|
+ <u-icon slot="icon" size="32" name="setting-o" custom-prefix="van-icon"></u-icon>
|
|
|
+ </u-cell-item>
|
|
|
+ </u-cell-group>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
|
|
|
<u-tabbar v-model="current" :list="list"></u-tabbar>
|
|
|
@@ -15,6 +201,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ src: '../../static/sailun/fade.jpg',
|
|
|
list: [{
|
|
|
iconPath: "home",
|
|
|
selectedIconPath: "home-fill",
|
|
|
@@ -41,14 +228,24 @@
|
|
|
],
|
|
|
current: 2
|
|
|
};
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ inStore(){
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .status_bar {
|
|
|
- height: var(--status-bar-height);
|
|
|
- width: 100%;
|
|
|
- background-color:#0095FF;
|
|
|
- }
|
|
|
+ .status_bar {
|
|
|
+ height: var(--status-bar-height);
|
|
|
+ width: 100%;
|
|
|
+ background-color: #0095FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 429rpx;
|
|
|
+ background: linear-gradient(50deg, #3F77F6 0%, #66CCFF 100%);
|
|
|
+ }
|
|
|
</style>
|
qukaidi
