|
|
<template>
|
|
|
<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 class="swiperBox">
|
|
|
<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="1000"
|
|
|
:display-multiple-items="2.3" style="height: 400rpx;">
|
|
|
<swiper-item>
|
|
|
<view class="swiper-item">
|
|
|
<image class="swiper-img" src="/static/test/test3.png" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
<swiper-item>
|
|
|
<view class="swiper-item">
|
|
|
<image class="swiper-img" src="/static/test/test4.png" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
<swiper-item>
|
|
|
<view class="swiper-item">
|
|
|
<image class="swiper-img" src="/static/test/test5.png" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<diamondLine></diamondLine>
|
|
|
|
|
|
<view class="content content6">
|
|
|
<view class="barBox">
|
|
|
<view class="titleBox">
|
|
|
<text>成功案例</text>
|
|
|
<view class="purpleBox"></view>
|
|
|
</view>
|
|
|
<text class="seeMore">查看更多></text>
|
|
|
</view>
|
|
|
<view class="headBox">
|
|
|
<view class="headbar">
|
|
|
<view class="barItem" :class="activeOne === 0?'active':''" @click="changeBar(0)">
|
|
|
<text>同康美妆</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 0"></view>
|
|
|
</view>
|
|
|
<view class="barItem" :class="activeOne === 1?'active':''" @click="changeBar(1)">
|
|
|
<text>中国药材</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 1"></view>
|
|
|
</view>
|
|
|
<view class="barItem" :class="activeOne === 2?'active':''" @click="changeBar(2)">
|
|
|
<text>中国药材</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 2"></view>
|
|
|
</view>
|
|
|
<view class="barItem" :class="activeOne === 3?'active':''" @click="changeBar(3)">
|
|
|
<text>中国药材</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 3"></view>
|
|
|
</view>
|
|
|
<view class="barItem" :class="activeOne === 3?'active':''" @click="changeBar(3)">
|
|
|
<text>中国药材</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 3"></view>
|
|
|
</view>
|
|
|
<view class="barItem" :class="activeOne === 3?'active':''" @click="changeBar(3)">
|
|
|
<text>中国药材</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 3"></view>
|
|
|
</view>
|
|
|
<view class="barItem" :class="activeOne === 3?'active':''" @click="changeBar(3)">
|
|
|
<text>中国药材</text>
|
|
|
<view class="xiahuaxian" v-show="activeOne === 3"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</view>
|
|
|
<view class="scroll11">
|
|
|
<view class="swiperBox">
|
|
|
<scroll-view scroll-x="true" scroll-y="false" class="scrollView" :enable-flex="true" :scroll-into-view="`scroll-${activeOne}`"
|
|
|
:show-scrollbar="false" scroll-with-animation="true" @touchmove.prevent="handleTouchMove" style="touch-action: none;">
|
|
|
<view class="scroll-item" v-for="(item,index) in 4" :id="`scroll-${index}`">
|
|
|
<image class="swiper-img" src="/static/test/test3.png" mode="widthFix"></image>
|
|
|
<text>{{index}}</text>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 使用封装的滚动组件 -->
|
|
|
<DIYScrollView
|
|
|
direction="x"
|
|
|
:itemCount="4"
|
|
|
:activeIndex="activeOne"
|
|
|
:scroll-into-view="`scroll-${activeOne}`"
|
|
|
@update:activeIndex="val => activeOne = val"
|
|
|
itemSelector=".scroll-item"
|
|
|
class="list-scroll scrollView"
|
|
|
style="display: none;"
|
|
|
>
|
|
|
<view class="scroll-list" style="">
|
|
|
<view class="scroll-item" v-for="(item,index) in 4" :id="`scroll-${index}`">
|
|
|
<image class="swiper-img" src="/static/test/test3.png" mode="widthFix"></image>
|
|
|
<text>{{index}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</DIYScrollView>
|
|
|
</view>
|
|
|
|
|
|
<signPopup :isOpen="signOpen"></signPopup>
|
|
|
<tabbar :tabIndex="0"></tabbar>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, nextTick, onMounted } from 'vue';
|
|
|
import diamondLine from '../../components/diamondLine/diamondLine.vue';
|
|
|
import DIYScrollView from '../../components/DIYScrollView/DIYScrollView.vue';
|
|
|
import signPopup from '../../components/signPopup/signPopup.vue';
|
|
|
const activeOne = ref(0)
|
|
|
|
|
|
const changeBar = (index)=>{
|
|
|
if(activeOne.value == index) return;
|
|
|
activeOne.value = index
|
|
|
nextTick()
|
|
|
console.log("1212",activeOne.value)
|
|
|
}
|
|
|
const handleTouchMove = (e)=> {
|
|
|
e.preventDefault(); // 强制阻止默认滚动行为
|
|
|
return false; // 增强阻止效果
|
|
|
}
|
|
|
const signOpen = ref(false)
|
|
|
onMounted(()=>{
|
|
|
nextTick(()=>{
|
|
|
signOpen.value = true
|
|
|
})
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.indexPage{
|
|
|
width: 100%;
|
|
|
min-height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
background: #FAFBFF;
|
|
|
}
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content5{
|
|
|
.swiperBox{
|
|
|
margin-top: 26rpx;
|
|
|
.swiper-img{
|
|
|
width: 272rpx;
|
|
|
height: 380rpx;
|
|
|
border-radius: 18rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.content6{
|
|
|
|
|
|
.headbar{
|
|
|
margin: 26rpx;
|
|
|
min-height: 64rpx;
|
|
|
@include flexBox(start,center);
|
|
|
flex-wrap: nowrap;
|
|
|
overflow-x: auto;
|
|
|
white-space: nowrap;
|
|
|
scrollbar-width: none;
|
|
|
/* 隐藏 WebKit 内核浏览器（Chrome、Safari、小程序等）的滚动条 */
|
|
|
&::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
/* 直接隐藏滚动条 */
|
|
|
}
|
|
|
.barItem{
|
|
|
flex-shrink: 0;
|
|
|
margin-right: 26rpx;
|
|
|
@include fontStyle(28rpx,#666666,left,400,38rpx);
|
|
|
position: relative;
|
|
|
.xiahuaxian{
|
|
|
position: absolute;
|
|
|
bottom: -14rpx;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%,0);
|
|
|
width: 100%;
|
|
|
height: 0rpx;
|
|
|
border: 2rpx solid #000000;
|
|
|
}
|
|
|
&.active{
|
|
|
color: #000000 !important;
|
|
|
font-weight: bold !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
.scroll11{
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
.scrollView{
|
|
|
@include flexBox(start,start);
|
|
|
// flex-wrap: nowrap;
|
|
|
overflow: auto;
|
|
|
.scroll-item{
|
|
|
width: 100%;
|
|
|
flex-shrink: 0; /* 核心：禁止子元素被压缩 */
|
|
|
box-sizing: border-box;
|
|
|
padding: 26rpx;
|
|
|
.swiper-img{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
}
|
|
|
.scroll-list{
|
|
|
width: 100%;
|
|
|
@include flexBox(start,start);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
