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.
284 lines
6.8 KiB
284 lines
6.8 KiB
3 days ago
|
<template>
|
||
|
|
<view class="indexPage">
|
||
|
|
<image class="indexBG" src="@/integralMall/static/indexBG.png" mode="widthFix"></image>
|
||
|
|
<view class="userBox">
|
||
|
|
<text>积分余额</text>
|
||
|
|
<view class="">
|
||
|
|
<text class="number">23980</text>
|
||
|
|
<text class="jifen">积分</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card">
|
||
|
|
<view class="cardHead">
|
||
|
|
<image class="miaoshaImg" src="@/integralMall/static/miaoshaImg.png" mode="widthFix"></image>
|
||
|
|
<text class="shuxian">|</text>
|
||
|
|
<text>距结束</text>
|
||
|
|
<uni-countdown class="countdown" :day="1" :hour="2" :minute="30" :second="0" color="#3A71FF" background-color="#FFFFFF" />
|
||
|
|
</view>
|
||
|
|
<view class="cardBody">
|
||
|
|
<view class="list">
|
||
|
|
<view class="listItem" v-for="item in 5">
|
||
|
|
<view class="imgBox">
|
||
|
|
<image src="@/integralMall/static/test/test.png" mode="aspectFill"></image>
|
||
|
|
<uni-tag text="剩余23件" class="unitag"
|
||
|
|
custom-style="background-color: rgba(0,0,0,0.3); border: none; color: #fff;">
|
||
|
|
</uni-tag>
|
||
|
|
</view>
|
||
|
|
<view class="itemBody">
|
||
|
|
<text class="title">iPhone16 pro</text>
|
||
|
|
<view class="qiangBox">
|
||
|
|
<image class="qiangtag" src="@/integralMall/static/qiangtag.png" mode="aspectFill"></image>
|
||
|
|
<text class="number">20000<text class="jifen">积分</text></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="headBar">
|
||
|
|
<view class="barItem" :class="activeIndex === 0?'active':''" @click="changeBar(0)">
|
||
|
|
<text>全部商品</text>
|
||
|
|
<view class="rect" v-show="activeIndex === 0"></view>
|
||
|
|
</view>
|
||
|
|
<view class="barItem" :class="activeIndex === 1?'active':''" @click="changeBar(1)">
|
||
|
|
<text>我可兑换</text>
|
||
|
|
<view class="rect" v-show="activeIndex === 1"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="proList">
|
||
|
|
<view class="proItem" v-for="item in 5" @click="$util.redirectTo('./pro/detail')">
|
||
|
|
<view class="proLeft">
|
||
|
|
<image class="proImg" src="@/integralMall/static/test/test2.png" mode="aspectFill"></image>
|
||
|
|
<uni-tag text="剩余23件" class="unitag"
|
||
|
|
custom-style="background-color: rgba(0,0,0,0.3); border: none; color: #fff;">
|
||
|
|
</uni-tag>
|
||
|
|
</view>
|
||
|
|
<view class="proRight">
|
||
|
|
<text class="proName">索尼丨索尼A7M4全画幅微单数码相机套装ILCE-7M4高清旅游摄影拍照</text>
|
||
|
|
<view class="tagBox">
|
||
|
|
<uni-tag text="品牌正品" class="unitag"
|
||
|
|
custom-style="background-color: #000000; border: none; color: #FFCC33;">
|
||
|
|
</uni-tag>
|
||
|
|
<uni-tag text="限时限量" class="unitag"
|
||
|
|
custom-style="background-color: #07C160; border: none; color: #FFF9F9;">
|
||
|
|
</uni-tag>
|
||
|
|
</view>
|
||
|
|
<view class="buyBox">
|
||
|
|
<text class="number">25000<text class="jifen">积分</text></text>
|
||
|
|
<image class="qiang" src="@/integralMall/static/qiang.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
const activeIndex = ref(0)
|
||
|
|
const changeBar = (index)=>{
|
||
|
|
if(activeIndex.value === index) return;
|
||
|
|
activeIndex.value = index
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" >
|
||
|
|
.indexPage{
|
||
|
|
position: relative;
|
||
|
|
padding-bottom: 26rpx;
|
||
|
|
.indexBG{
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.userBox{
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
margin: -40rpx 26rpx 26rpx;
|
||
|
|
background: linear-gradient( 180deg, #D0DDFF 0%, #FFFFFF 100%);
|
||
|
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
|
||
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 40rpx 26rpx;
|
||
|
|
@include fontStyle(28rpx,#000000,left,500,38rpx);
|
||
|
|
@include flexBox(between,center);
|
||
|
|
.number{
|
||
|
|
@include fontStyle(58rpx,#333333,right,800,68rpx);
|
||
|
|
padding-right: 10rpx;
|
||
|
|
}
|
||
|
|
.jifen{
|
||
|
|
@include fontStyle(24rpx,#333333,right,400,38rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card{
|
||
|
|
margin: 26rpx;
|
||
|
|
background: linear-gradient( 360deg, #094EF3 0%, #4B91FE 45%, #D6E4FD 100%);
|
||
|
|
box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0,0,0,0.05);
|
||
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 26rpx;
|
||
|
|
.cardHead{
|
||
|
|
width: 100%;
|
||
|
|
@include flexBox(start,center);
|
||
|
|
padding-bottom: 26rpx;
|
||
|
|
@include fontStyle(34rpx,#000000,left,500,44rpx);
|
||
|
|
.miaoshaImg{
|
||
|
|
width: 142rpx;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
.shuxian{
|
||
|
|
padding: 0 26rpx;
|
||
|
|
}
|
||
|
|
.countdown{
|
||
|
|
margin-left: 26rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cardBody{
|
||
|
|
.list{
|
||
|
|
width: 100%;
|
||
|
|
@include flexBox(start,center);
|
||
|
|
overflow-x: auto;
|
||
|
|
scrollbar-width: none;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.listItem{
|
||
|
|
width: 240rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
|
&:not(:last-child){
|
||
|
|
margin-right: 26rpx;
|
||
|
|
}
|
||
|
|
.imgBox{
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
image{
|
||
|
|
width: 240rpx;
|
||
|
|
height: 240rpx;
|
||
|
|
border-radius: 18rpx 18rpx 0 0;
|
||
|
|
}
|
||
|
|
.unitag{
|
||
|
|
position: absolute;
|
||
|
|
top: 180rpx;
|
||
|
|
left: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qiangBox{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.qiangtag{
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 46rpx;
|
||
|
|
}
|
||
|
|
.itemBody{
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10rpx;
|
||
|
|
.title{
|
||
|
|
@include fontStyle(32rpx,#000000,left,500,44rpx);
|
||
|
|
@include truncateText(1);
|
||
|
|
padding-bottom: 26rpx;
|
||
|
|
}
|
||
|
|
.number{
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
padding-left: 10rpx;
|
||
|
|
@include fontStyle(28rpx,#FFFFFF,left,800,44rpx);
|
||
|
|
.jifen{
|
||
|
|
@include fontStyle(24rpx,#FFFFFF,left,400,44rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.headBar{
|
||
|
|
width: 60%;
|
||
|
|
margin: 46rpx auto;
|
||
|
|
@include flexBox(around,center);
|
||
|
|
.barItem{
|
||
|
|
position: relative;
|
||
|
|
@include fontStyle(34rpx,#3A71FF,left,400,48rpx);
|
||
|
|
&.active{
|
||
|
|
@include fontStyle(34rpx,#3A71FF,left,bold,48rpx);
|
||
|
|
}
|
||
|
|
.rect{
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 50%;
|
||
|
|
z-index: -1;
|
||
|
|
transform: translate(-50%,0%);
|
||
|
|
width: 100%;
|
||
|
|
height: 20rpx;
|
||
|
|
background: linear-gradient( 180deg, #6694FF 0%, #FFFFFF 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.proList{
|
||
|
|
.proItem{
|
||
|
|
margin: 26rpx;
|
||
|
|
@include flexBox(start,start);
|
||
|
|
.proLeft{
|
||
|
|
position: relative;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
.proImg{
|
||
|
|
width: 252rpx;
|
||
|
|
height: 252rpx;
|
||
|
|
border-radius: 18rpx;
|
||
|
|
}
|
||
|
|
.unitag{
|
||
|
|
position: absolute;
|
||
|
|
top: 200rpx;
|
||
|
|
left: 16rpx;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.proRight{
|
||
|
|
flex: 1;
|
||
|
|
min-height: 252rpx;
|
||
|
|
@include flexBox(between,start,column);
|
||
|
|
.tagBox{
|
||
|
|
margin: 10rpx 0;
|
||
|
|
@include flexBox(start,center);
|
||
|
|
.unitag{
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.proName{
|
||
|
|
@include fontStyle(28rpx,#000000,left,500,38rpx);
|
||
|
|
@include truncateText();
|
||
|
|
}
|
||
|
|
.buyBox{
|
||
|
|
width: 100%;
|
||
|
|
height: 80rpx;
|
||
|
|
background: #E6EDFF;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
@include fontStyle(40rpx,#3A71FF,left,600,48rpx);
|
||
|
|
@include flexBox(between,center);
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-left: 26rpx;
|
||
|
|
.jifen{
|
||
|
|
@include fontStyle(24rpx,#3A71FF,left,500,38rpx);
|
||
|
|
padding-left: 10rpx;
|
||
|
|
}
|
||
|
|
.qiang{
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|