master
Candice 1 week ago
parent 3f5bd37b88
commit 36e9335b2f

@ -0,0 +1,46 @@
<template>
<view class="diamond-line-container">
<!-- 左侧横线 -->
<view class="line"></view>
<!-- 中间菱形 -->
<view class="diamond"></view>
<!-- 右侧横线 -->
<view class="line"></view>
</view>
</template>
<script>
export default {
name:"diamondLine",
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.diamond-line-container {
display: flex;
align-items: center;
// width: 100%;
margin: 40rpx 26rpx;
}
/* 横线样式 */
.line {
flex: 1;
height: 2rpx;
background-color: rgba(0, 0, 0, 0.3);
}
/* 菱形样式 */
.diamond {
width: 22rpx;
height: 22rpx;
margin: 0 26rpx;
border: 2rpx solid #AFB0B3;
transform: rotate(45deg);
}
</style>

@ -0,0 +1,87 @@
<template>
<view class="tag-container">
<!-- 标签内容长方形部分 -->
<view class="tag-content">
<text class="tag-text">{{ text }}</text>
</view>
</view>
</template>
<script>
export default {
name:"triangleTag",
data() {
return {
};
},
props: {
//
text: {
type: String,
default: '标签'
},
//
color: {
type: String,
default: '#3A71FF' //
}
}
}
</script>
<style lang="scss" scoped>
.tag-container {
display: inline-flex;
align-items: center;
margin: 10rpx;
position: relative;
}
/* 长方形部分(空心边框) */
.tag-content {
height: 56rpx;
padding: 0 30rpx; /* 左右内边距保持一致 */
border: 2rpx solid #3A71FF;
border-left: none; /* 左侧无边框,与三角形衔接 */
border-radius: 0 10rpx 10rpx 0;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
}
/* 标签文字 */
.tag-text {
color: #3A71FF;
font-size: 26rpx;
font-weight: 500;
}
/* 左侧三角形边框(修复上下多余边) */
/* 外层:三角形边框 */
.tag-container::before {
content: '';
position: absolute;
left: 0;
top: 0;
/* 关键将上下边框宽度减少1rpx避免边缘溢出 */
border-top: 29rpx solid transparent;
border-bottom: 29rpx solid transparent;
/* 右侧边框宽度等于三角形边长,颜色为边框色 */
border-right: 28rpx solid #3A71FF;
}
/* 内层:覆盖中间部分,形成空心效果 */
.tag-container::after {
content: '';
position: absolute;
left: 2rpx; /* 与外层边框宽度一致 */
top: 2rpx; /* 向下偏移2rpx对齐边框 */
/* 内层尺寸比外层小4rpx上下各减2rpx */
border-top: 27rpx solid transparent;
border-bottom: 27rpx solid transparent;
/* 右侧边框颜色与背景一致(这里假设背景是#E6EDFF根据实际场景调整 */
border-right: 26rpx solid #E6EDFF;
}
</style>

@ -1,15 +1,764 @@
<template>
<view class="content">
hsdfjkhsk
<view class="indexPage">
<image class="indexBG" src="/static/index/indexBG.png" mode="widthFix"></image>
<view class="body">
<view class="userBox">
<view class="userItem">
<view class="userInfo">
<image class="avatar" src="/static/my/avatar.png" mode="aspectFill"></image>
<view class="">
<view class="name">
<text>力仁数科</text>
<uni-tag text="会员LV.1" size="mini" custom-style="background: linear-gradient( 321deg, #4E5379 0%, #30344E 100%); color: #FEC741;border-radius: 10rpx;"></uni-tag>
</view>
<text class="mobile">135****5555</text>
</view>
</view>
<view class="iconBox">
<image src="/static/index/codeIcon.png" mode="aspectFill"></image>
<image src="/static/index/userIcon.png" mode="aspectFill"></image>
</view>
</view>
<view class="userItem">
<view class="integral">
<text class="subTitle">我的积分</text>
<text class="title">积分余额</text>
<text class="number">23900 <text class="jifen">积分</text> </text>
<button class="useBtn">立即使用</button>
</view>
<view class="btnGroup">
<view class="btnItem">
<image class="btnIcon" src="/static/index/goSign.png" mode="aspectFill"></image>
<view class="textBox">
<text class="title">每日签到</text>
<text>每日签到即可获得积分</text>
</view>
</view>
<view class="btnItem bg-w">
<image class="btnIcon" src="/static/index/goShop.png" mode="aspectFill"></image>
<view class="textBox">
<text class="title">积分商城</text>
<text>为您提供各种热门积分好礼</text>
</view>
</view>
</view>
</view>
</view>
<view class="content content1">
<view class="barBox">
<view class="titleBox">
<text>购物商城</text>
<view class="purpleBox"></view>
</view>
<text class="seeMore">查看更多></text>
</view>
<view class="card">
<view class="cardHead">
<text class="hotSale">热销榜单</text>
<text>臻选品质好物</text>
</view>
<view class="cardBody">
<scroll-view scroll-x="true" >
<view class="list">
<view class="listItem" v-for="item in 6">
<view class="tag">
<text>销量榜</text>
</view>
<text class="title">破解传统赋码困境</text>
<text class="title">赋能企业智能升级</text>
<text class="saleText">2400人购买</text>
<image src="/static/myBG.png" mode="aspectFill"></image>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<view class="content content2">
<swiper style="height: 480rpx;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="item in 5">
<view class="swiper-item">
<image class="swiper-img" src="/static/test/test1.png" mode="aspectFill"></image>
<button class="gobtn">
立即定制
<image class="rightCircle" src="/static/rightCircle.png" mode="aspectFill"></image>
</button>
</view>
</swiper-item>
</swiper>
<view class="proList">
<view class="card" v-for="(item,index) in 4">
<view class="cardHead">
<image src="/static/test/test.png" mode="aspectFill"></image>
</view>
<view class="cardBody">
<text class="title">智能产线升级改造配套方案定制</text>
<view class="">
<text class="yuan"><text class="yuanText"></text>12333</text>
<text class="yuan1"><text class="yuanText1"></text>12333</text>
</view>
</view>
</view>
</view>
</view>
<diamondLine></diamondLine>
<view class="content content3">
<view class="barBox">
<view class="titleBox">
<text>积分商城</text>
<view class="purpleBox"></view>
</view>
<text class="seeMore">查看更多></text>
</view>
<view class="card">
<view class="cardLeft">
<text class="title">兑换最多</text>
<text>限量供应 先到先得</text>
<image class="proImg" src="/static/test/test1.png" mode="aspectFill"></image>
<text class="proName">新秀丽大容量拉杆箱</text>
<view class="price">
<text style="padding-right: 16rpx;">抢购价</text>
<view class="">
<image class="flightening" src="/static/flightening.png" mode="aspectFill"></image>
<text class="number">20000000积分</text>
</view>
</view>
</view>
<view class="cardRight">
<text class="title">推荐兑换</text>
<view class="proList">
<view class="proItem" v-for="item in 6">
<image class="proImg" src="/static/test/test1.png" mode="aspectFill"></image>
<view class="proRight">
<text class="proName">东方红时间跨度混分巨兽黄大发圣诞节回复会计师</text>
<text class="number">20000 <text class="jifen">积分</text> </text>
<!-- <triangleTag text="超值兑换"></triangleTag> -->
<image class="tag" src="/static/tag.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="list">
<view class="listItem" v-for="item in 5">
<view class="card1">
<view class="itemHead">
<image src="/static/test/test.png" mode="aspectFill"></image>
</view>
<view class="itemBody">
<text class="title">智能产线升级改造配套方案定制</text>
<text class="subTitle">仅可兑换一次</text>
<view class="">
<text class="yuan">1222<text class="yuanText">积分</text></text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="content content4">
<view class="card">
<view class="cardHead">
<text class="hotSale">热门兑换</text>
<text>限量供应 先到先得</text>
</view>
<view class="cardBody">
<view class="list">
<view class="listItem" v-for="item in 6">
<image class="proImg" src="/static/test/test1.png" mode="aspectFill"></image>
<text class="title">sjshdsfs,m</text>
<text class="subTitle">剩余123份可兑换</text>
<progress :percent="20" active-color="#3A71FF" backgroundColor="#E9E9E9"
:show-info="false" class="progress" border-radius="10" />
<view class="listBottom">
<view class="">
<image class="starIcon" src="/static/starIcon.png" mode="aspectFill"></image>
<text class="num">3000</text>
</view>
<button class="payBtn">
<image class="giftIcon" src="/static/giftIcon.png" mode="aspectFill"></image>
兑换
</button>
</view>
</view>
</view>
</view>
</view>
</view>
<diamondLine></diamondLine>
<view class="content content5">
<view class="barBox">
<view class="titleBox">
<text>企业资讯</text>
<view class="purpleBox"></view>
</view>
<text class="seeMore">查看更多></text>
</view>
</view>
</view>
<tabbar :tabIndex="0"></tabbar>
</view>
</template>
<script setup>
import { ref } from 'vue';
import diamondLine from '../../components/diamondLine/diamondLine.vue';
</script>
<style lang="scss" scoped>
.indexPage{
width: 100%;
min-height: 100vh;
box-sizing: border-box;
position: relative;
}
.indexBG{
width: 100%;
height: auto;
}
.body{
position: relative;
z-index: 10;
margin-top: -100rpx;
background: linear-gradient( 180deg, #EFF6FF 0%, #FAFBFF 100%);
box-shadow: 0rpx -18rpx 22rpx 0rpx rgba(0,0,0,0.05);
border-radius: 54rpx 54rpx 0rpx 0rpx;
.userBox{
padding: 26rpx;
.userItem{
@include flexBox(between,stretch);
.userInfo{
@include flexBox(start,center);
@include fontStyle(24rpx,#333333,left,400,48rpx);
.avatar{
width: 118rpx;
height: 118rpx;
margin-right: 10rpx;
border-radius: 18rpx;
}
.name{
@include fontStyle(32rpx,#333333,left,bold,48rpx);
text{
padding-right: 10rpx;
}
}
}
.iconBox{
@include flexBox(start,center);
image{
width: 56rpx;
height: 56rpx;
margin-left: 26rpx;
}
}
.integral{
margin: 26rpx 0;
width: 330rpx;
background: #3A71FF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx;
@include fontStyle(28rpx,#FFFFFF,left,500,48rpx);
@include flexBox(start,start,column);
.subTitle{
@include fontStyle(24rpx,#FFFFFF,left,400,48rpx);
padding-bottom: 26rpx;
}
.number{
@include fontStyle(58rpx,#FFFFFF,left,400,68rpx);
padding-top: 16rpx;
.jifen{
@include fontStyle(24rpx,#FFFFFF,left,400,48rpx);
}
}
.useBtn{
min-width: 150rpx;
height: 46rpx;
background: #3A71FF;
border-radius: 36rpx 36rpx 36rpx 36rpx;
border: 2rpx solid #FFFFFF;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
@include flexBox();
margin: 46rpx 0 0;
}
}
.btnGroup{
margin: 26rpx 0;
@include flexBox(between,center,column);
.bg-w{
background: #FFFFFF !important;
box-shadow: 0rpx 4rpx 11rpx 0rpx rgba(0,0,0,0.08);
}
.btnItem{
width: 330rpx;
background: #E6EDFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx;
@include flexBox(start,center);
.btnIcon{
width: 72rpx;
height: 72rpx;
margin-right: 16rpx;
}
.textBox{
flex: 1;
@include fontStyle(24rpx,#666666,left,400,32rpx);
.title{
display: block;
@include fontStyle(32rpx,#333333,left,bold,42rpx);
}
}
}
}
}
}
}
.barBox {
margin: 0rpx 0 26rpx;
@include flexBox(between, center);
@include fontStyle(34rpx, #000000, left, bold, 44rpx);
.seeMore {
@include fontStyle(26rpx, #666666, right, 400, 44rpx);
}
.titleBox {
position: relative;
text {
position: relative;
z-index: 2;
}
.purpleBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
width: 92rpx;
height: 28rpx;
background: linear-gradient(180deg, #86AAFA 0%, #C9D6FF 100%);
opacity: 0.9;
z-index: 1;
}
}
}
.content{
margin: 0 26rpx;
}
.content1{
.card{
width: 100%;
background: #E6EDFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx;
.cardHead{
@include fontStyle(24rpx,#000000,left,400,48rpx);
.hotSale{
@include fontStyle(34rpx,#000000,left,bold,48rpx);
padding-right: 20rpx;
}
}
.cardBody{
margin-top: 26rpx;
.list{
width: 100%;
overflow-x: auto;
@include flexBox(start,start);
flex-wrap: nowrap;
.listItem{
width: 300rpx;
min-width: 300rpx;
height: 416rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
position: relative;
@include flexBox(start,start,column);
box-sizing: border-box;
padding: 60rpx 26rpx 0;
margin-right: 20rpx;
.tag{
position: absolute;
top: 0;
left: 0;
width: 112rpx;
height: 48rpx;
background: linear-gradient( 180deg, #4E86FF 0%, #9EB6FF 100%);
border-radius: 18rpx 0 18rpx 0;
font-weight: 500;
font-size: 22rpx;
color: #FFFFFF;
@include flexBox();
}
.saleText{
@include fontStyle(24rpx,#3A71FF,left,400,48rpx);
}
image{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 220rpx;
border-radius: 0 0 18rpx 18rpx;
}
}
}
}
}
}
.content2{
margin: 26rpx;
background: #E6EDFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx;
.swiper-item{
position: relative;
height: 100%;
.swiper-img{
width: 100%;
height: 480rpx;
}
.gobtn{
position: absolute;
top: 76%;
left: 20rpx;
min-width: 200rpx;
height: 62rpx;
background: #FFFFFF;
border-radius: 54rpx 54rpx 54rpx 54rpx;
@include flexBox();
font-weight: 500;
font-size: 28rpx;
color: #3A71FF;
image{
width: 36rpx;
height: 36rpx;
margin-left: 16rpx;
}
}
}
.proList {
@include flexBox(between, center);
flex-wrap: wrap;
.card {
width: 310rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 24rpx 24rpx 24rpx 24rpx;
margin-top: 26rpx;
.cardHead {
image {
width: 100%;
height: 334rpx;
display: block;
margin: 0;
border-radius: 24rpx 24rpx 0rpx 0rpx;
}
}
.cardBody {
box-sizing: border-box;
padding: 16rpx 26rpx;
.title {
@include fontStyle(28rpx, #000000, left, 500, 48rpx);
@include truncateText(1);
}
.subTitle {
@include fontStyle(26rpx, #666666, left, 500, 38rpx);
@include truncateText();
}
.yuan {
@include fontStyle(36rpx, #3A71FF, left, bold, 48rpx);
padding-right: 20rpx;
.yuanText {
@include fontStyle(26rpx, #3A71FF, left, bold, 48rpx);
}
}
.yuan1 {
@include fontStyle(26rpx, #666666, left, 400, 48rpx);
text-decoration: line-through;
.yuanText1 {
@include fontStyle(24rpx, #666666, left, 400, 48rpx);
}
}
}
}
}
}
.content3{
.card{
@include flexBox(between,start);
.title{
@include fontStyle(34rpx,#000000,left,bold,44rpx);
}
.cardLeft{
width: 330rpx;
height: 540rpx;
background: #E6EDFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx;
@include flexBox(start,start,column);
@include fontStyle(24rpx,#333333,left,400,44rpx);
.proName{
@include fontStyle(24rpx,#000000,center,500,44rpx);
@include truncateText();
}
.proImg{
width: 280rpx;
height: 280rpx;
margin: 16rpx 0;
border-radius: 18rpx;
}
.price{
margin: 16rpx 0;
min-height: 50rpx;
padding-left: 16rpx;
border: 2rpx solid #3A71FF;
border-radius: 46rpx 46rpx;
@include flexBox();
@include fontStyle(24rpx,#3A71FF,left,500,32rpx);
&>view{
flex: 1;
position: relative;
box-sizing: border-box;
padding: 14rpx 14rpx 14rpx 26rpx;
border-radius: 46rpx 46rpx;
height: 100%;
background: #3A71FF;
@include flexBox(start,center);
.number{
@include fontStyle(24rpx,#FFFFFF,left,500,32rpx);
@include truncateText(1);
}
}
.flightening{
position: absolute;
top: 0;
left: -10rpx;
z-index: 10;
width: 26rpx;
height: 52rpx;
}
}
}
.cardRight{
width: 330rpx;
height: 540rpx;
background: #E6EDFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx 10rpx 0;
.proList{
// margin-top: 20rpx;
height: 460rpx;
flex: 1;
overflow-y: auto;
scrollbar-width: none;
/* 隐藏 WebKit 内核浏览器Chrome、Safari、小程序等的滚动条 */
&::-webkit-scrollbar {
display: none;
}
.proItem{
margin: 10rpx 0;
@include flexBox(start,start);
.proImg{
width: 144rpx;
height: 144rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
.proRight{
flex: 1;
.proName{
@include fontStyle(24rpx,#000000,left,500,34rpx);
@include truncateText(1);
}
.number{
padding-top: 10rpx;
@include fontStyle(32rpx,#3A71FF,left,bold,40rpx);
.jifen{
@include fontStyle(24rpx,#000000,left,400,34rpx);
}
}
.tag{
width: 126rpx;
height: auto;
margin-top: 16rpx;
}
}
}
}
}
}
}
.list{
@include flexBox(start, stretch);
overflow-x: auto;
scrollbar-width: none;
/* 隐藏 WebKit 内核浏览器Chrome、Safari、小程序等的滚动条 */
&::-webkit-scrollbar {
display: none;
}
.listItem{
.card1 {
width: 216rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 24rpx 24rpx 24rpx 24rpx;
margin-top: 26rpx;
margin-right: 26rpx;
.itemHead {
image {
width: 216rpx;
height: 164rpx;
// display: block;
margin: 0;
border-radius: 24rpx 24rpx 0rpx 0rpx;
}
}
.itemBody {
box-sizing: border-box;
padding: 16rpx 26rpx;
.title {
@include fontStyle(26rpx, #000000, left, 500, 32rpx);
@include truncateText(2);
}
.subTitle {
@include fontStyle(24rpx, #666666, left, 500, 32rpx);
@include truncateText(1);
padding: 10rpx 0;
}
.yuan {
@include fontStyle(36rpx, #3A71FF, left, bold, 48rpx);
padding-right: 20rpx;
.yuanText {
@include fontStyle(26rpx, #3A71FF, left, bold, 48rpx);
padding-left: 6rpx;
}
}
}
}
}
}
.content4{
.card{
width: 100%;
background: #E6EDFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
box-sizing: border-box;
padding: 26rpx;
.cardHead{
@include fontStyle(24rpx,#000000,left,400,48rpx);
.hotSale{
@include fontStyle(34rpx,#000000,left,bold,48rpx);
padding-right: 20rpx;
}
}
.cardBody{
margin-top: 26rpx;
.list{
width: 100%;
@include flexBox(between,start);
flex-wrap: wrap;
.listItem{
width: 310rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
position: relative;
@include flexBox(start,start,column);
box-sizing: border-box;
padding: 10rpx;
.proImg{
width: 100%;
height: 182rpx;
margin-bottom: 10rpx;
border-radius: 18rpx;
}
.title{
@include fontStyle(28rpx,#333333,left,bold,38rpx);
}
.subTitle{
@include fontStyle(20rpx,#999999,left,400,48rpx);
}
.progress{
width: 100%;
margin: 10rpx 0 26rpx;
}
.listBottom{
width: 100%;
@include flexBox(between,center);
.starIcon{
width: 28rpx;
height: 28rpx;
margin-right: 10rpx;
}
.num{
@include fontStyle(28rpx,#3A71FF,left,500,38rpx);
}
.payBtn{
min-width: 92rpx;
height: 42rpx;
background: #3A71FF;
border-radius: 6rpx;
@include flexBox();
margin: 0;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
.giftIcon{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
}
}
}
}
}
}
</style>

@ -106,7 +106,7 @@
<view class="card">
<view class="cardHead">
<text>签到日历</text>
<view class="seeMore">
<view class="seeMore" v-if="false">
<text>查看更多</text>
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
</view>
@ -136,7 +136,8 @@ import { ref } from 'vue'
import { useIndexStore } from '../../store';
const indexStore = useIndexStore()
const selectedList = ref([{date: '2025-08-07', info: '+10', data: { custom: '自定义信息', name: '自定义消息头' }}])
const selectedList = ref([{date: '2025-08-07', info: '+10', data: { custom: '自定义信息', name: '自定义消息头' }},
{date: '2025-08-13', info: '已签到', data: { custom: '自定义信息', name: '自定义消息头' }}])
</script>
<style lang="scss" scoped>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 433 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 940 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

Loading…
Cancel
Save