Candice
/
lirenGO_uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
lirenGO_uniapp/pages/index/index.vue

970 lines
24 KiB
Raw Permalink Normal View History Unescape

firstInit
2 weeks ago
<template>
initIndex
1 week ago
<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>
1
2 days ago
<view class="btnItem bg-w" @click="goIntegral">
initIndex
1 week ago
<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>
1
1 week ago
<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>
initIndex
1 week ago
</view>
1
1 week ago
<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"
1
3 days ago
:scroll-into-view="`scroll-${activeOne}`"
1
1 week ago
@update:activeIndex="val => activeOne = val"
itemSelector=".scroll-item"
class="list-scroll scrollView"
1
3 days ago
style="display: none;"
1
1 week ago
>
1
3 days ago
<view class="scroll-list" style="">
1
1 week ago
<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>
initIndex
1 week ago
</view>
1
3 days ago
<signPopup :isOpen="signOpen"></signPopup>
firstInit
2 weeks ago
<tabbar :tabIndex="0"></tabbar>
1
3 days ago
firstInit
2 weeks ago
</view>
</template>
<script setup>
1
3 days ago
import { ref, nextTick, onMounted } from 'vue';
initIndex
1 week ago
import diamondLine from '../../components/diamondLine/diamondLine.vue';
1
1 week ago
import DIYScrollView from '../../components/DIYScrollView/DIYScrollView.vue';
1
3 days ago
import signPopup from '../../components/signPopup/signPopup.vue';
1
2 days ago
import util from '../../common/js/util.js';
1
1 week ago
const activeOne = ref(0)
firstInit
2 weeks ago
1
1 week ago
const changeBar = (index)=>{
if(activeOne.value == index) return;
activeOne.value = index
nextTick()
console.log("1212",activeOne.value)
}
const handleTouchMove = (e)=> {
e.preventDefault(); // 强制阻止默认滚动行为
return false; // 增强阻止效果
}
1
2 days ago
const goIntegral = ()=>{
uni.showModal({
title:'温馨提示',
content: '即将打开“力仁GO积分商城”小程序',
success: (res) => {
if(res.confirm){
util.redirectTo('/integralMall/pages/index')
}
}
})
}
1
3 days ago
const signOpen = ref(false)
onMounted(()=>{
nextTick(()=>{
signOpen.value = true
})
})
firstInit
2 weeks ago
</script>
<style lang="scss" scoped>
initIndex
1 week ago
.indexPage{
width: 100%;
min-height: 100vh;
box-sizing: border-box;
position: relative;
1
1 week ago
background: #FAFBFF;
initIndex
1 week ago
}
.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;
}
}
}
}
}
firstInit
2 weeks ago
initIndex
1 week ago
}
.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;
}
}
}
}
}
}
}
}
1
1 week ago
.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%;
1
3 days ago
}
.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{
1
1 week ago
width: 100%;
1
3 days ago
height: auto;
1
1 week ago
}
1
3 days ago
}
.scroll-list{
width: 100%;
@include flexBox(start,start);
1
1 week ago
}
}
firstInit
2 weeks ago
</style>