feat(uniapp_v2): 二开功能迁移与小程序主包优化
- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动 - queue、assets 使用独立分包以降低主包体积 - 修复首页单根节点与支付结果页 v-if 链 - 关闭 HjfDemoPanel 全局注册；uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错 - 配置域名与 manifest 应用名称；cache/store 防御性处理 Made-with: Cursor
This commit is contained in:
apple
842
pro_v3.5.1/view/uniapp_v2/pages/index/components/homeComb.vue
Normal file
842
pro_v3.5.1/view/uniapp_v2/pages/index/components/homeComb.vue
Normal file
@@ -0,0 +1,842 @@
|
||||
<template>
|
||||
<view class="page_count" v-if="!dataConfig.isHide">
|
||||
<view class="bg-img" v-if="imgUrls.length">
|
||||
<image :class="{ active: index == swiperCur }"
|
||||
v-for="(i, index) in imgUrls" :key="index" :src="i.img"></image>
|
||||
</view>
|
||||
<view class="bag-gradient" :style="[bgGradientStyle]"></view>
|
||||
<!--搜索-->
|
||||
<view class="my-main">
|
||||
<view class="mp-header" id="home" :style="[mpHeaderStyle]">
|
||||
<view class="sys-head" :style="{height: statusBarHeight + 'px'}"></view>
|
||||
<view class="serch-box">
|
||||
<view class="serch-wrapper flex">
|
||||
<view class="logo skeleton-rect">
|
||||
<image :src="logoUpImg" mode="heightFix"></image>
|
||||
</view>
|
||||
<navigator v-if="hotWords.length" :url="'/pages/goods/goods_search/index?searchVal='+searchVal" :class="logoConfig ? 'input' : 'uninput'" hover-class="none"
|
||||
class="skeleton-rect" :style="[inputStyle]">
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" circular="true" @change="textChange">
|
||||
<block v-for="(item,index) in hotWords" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-ic_search"></text>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/goods/goods_search/index" hover-class="none" class="skeleton-rect input" :style="[inputStyle]">
|
||||
{{ dataConfig.inputConfig.value }}
|
||||
<text class="iconfont icon-ic_search"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+ (statusBarHeight+43) +'px'" v-if="!special && searchShow"></view>
|
||||
<view v-if="!dataConfig.classConfig.tabVal" class="navTabBox tabNav">
|
||||
<view class="longTab" :style="{ width: `${mainWidth}px` }">
|
||||
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
|
||||
<view class="longItem" v-for="(item,index) in tabListConfig" :key="index"
|
||||
:class="{ click: index == tabClick }" :id="'id'+index" :data-index="index"
|
||||
:style="{marginRight: `${dataConfig.contentConfig.val * 2}rpx`}"
|
||||
@click="changeTab(item,index)">{{item.text.val}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="category" @click="showCategory">
|
||||
<text class="iconfont icon-a-ic_Imageandtextsorting" :style="'color:'+(isScrolled?txtColor:'#fff')"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isCategory" class="category_count">
|
||||
<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="fs-28">精选类目</view>
|
||||
<view class="cate_count grid-column-4 grid-gap-16rpx mt-32">
|
||||
<view class="category_item" :class="index===tabClick?'clicks':''" @click="changeTab(item,index)" v-for="(item,index) in tabListConfig" :key="index" :id="'ids'+index">
|
||||
{{item.text.val}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiperBg pb-20">
|
||||
<!-- :style="{ paddingBottom: isMenu ? '30rpx' : '30rpx'}" -->
|
||||
<view class="swiper page_swiper" v-if="imgUrls.length">
|
||||
<swiper
|
||||
:autoplay="true"
|
||||
:circular="circular"
|
||||
:interval="intervals"
|
||||
:duration="duration"
|
||||
:current="swiperCur"
|
||||
:previous-margin="swiperMargin"
|
||||
:next-margin="swiperMargin"
|
||||
:style="{'height': imageH + 'px'}"
|
||||
@change="swiperChange">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" :style="[imageStyle]" mode="aspectFill" class="slide-image"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!--重置小圆点的样式 -->
|
||||
<view class="dots acea-row" :class="{
|
||||
'row-center': dataConfig.docPosition.tabVal == 1,
|
||||
'row-right': dataConfig.docPosition.tabVal == 2,
|
||||
}">
|
||||
<view v-if="dataConfig.docConfig.tabVal == 2" class="dot3">
|
||||
<view class="dot" :style="[progressWidth,dotBgColor]">
|
||||
<view class="active" :style="[progressValue,dotColor]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="acea-row" :class="{
|
||||
dot1: dataConfig.docConfig.tabVal == 0,
|
||||
dot2: dataConfig.docConfig.tabVal == 1,
|
||||
dot4: dataConfig.docConfig.tabVal == 3,
|
||||
}">
|
||||
<view v-for="(item, index) in imgUrls" :key="index" class="dot" :class="{ active: index == swiperCur }" :style="[dotBgColor,index==swiperCur?dotColor:'']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isCategory" class="mask" @click="isCategory = false"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCategoryList
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getCategoryVersion
|
||||
} from '@/api/api.js';
|
||||
let statusBarHeight = uni.getWindowInfo().statusBarHeight;
|
||||
export default {
|
||||
name: 'homeComb',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScrolled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScale: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
special: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight,
|
||||
autoplay: true,
|
||||
interval: this.dataConfig.numConfig.val * 1000 || 2500,
|
||||
duration: 500,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
tabClick: 0, //导航栏被点击
|
||||
isLeft: 0, //导航栏下划线位置
|
||||
isWidth: 0, //每个导航栏占位
|
||||
mainWidth: 0,
|
||||
tabLeft: 0,
|
||||
tabTitle: [],
|
||||
isTop: 0,
|
||||
navHeight: 38,
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
intervals: 3000,
|
||||
imgUrls: [], //图片轮播数据
|
||||
swiperCur: 0,
|
||||
searchVal: '',
|
||||
bgColor: this.dataConfig.swiperConfig.list.length ? this.dataConfig.swiperConfig.list[0].img : '',
|
||||
isCategory: false,
|
||||
classColor: '',
|
||||
txtColor: '',
|
||||
hotWordShow: false,
|
||||
bgColorLeft: '',
|
||||
bgColorRight: '',
|
||||
searchShow: false,
|
||||
imageH:160,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
swiperMargin() {
|
||||
return this.dataConfig.styleConfig.tabVal ? '50rpx' : '10rpx';
|
||||
},
|
||||
bgGradientStyle(){
|
||||
return {
|
||||
'background-image': `linear-gradient(to bottom, rgba(245,245,245,0) 0%, rgba(245,245,245,0) 50%, ${this.dataConfig.gradientColor ? this.dataConfig.gradientColor.color[0].item : '#f5f5f5'} 100%)`
|
||||
}
|
||||
},
|
||||
mpHeaderStyle() {
|
||||
let style = {};
|
||||
if (this.isScrolled && this.dataConfig.searchConfig.tabVal) {
|
||||
style.background = `linear-gradient(90deg, #FFFFFF 50%, #FFFFFF 100%)`;
|
||||
style.position = `fixed`;
|
||||
this.searchShow = true;
|
||||
} else {
|
||||
this.searchShow = false;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
inputStyle() {
|
||||
let style = {};
|
||||
if (this.isScrolled && this.dataConfig.searchConfig.tabVal) {
|
||||
style.background = `#F5F5F5`;
|
||||
style.color = `#BBBBBB`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
progressWidth() {
|
||||
return {
|
||||
width: `${this.dataConfig.swiperConfig.list.length * 20}rpx`,
|
||||
};
|
||||
},
|
||||
progressValue() {
|
||||
return {
|
||||
width: `${(this.swiperCur + 1) / this.dataConfig.swiperConfig.list.length * 100}%`,
|
||||
};
|
||||
},
|
||||
dotBgColor() {
|
||||
return {
|
||||
background: this.dataConfig.dotBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
dotColor() {
|
||||
return {
|
||||
background: this.dataConfig.dotColor.color[0].item,
|
||||
};
|
||||
},
|
||||
imageStyle() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
tabListConfig() {
|
||||
let tabList = this.dataConfig.tabListConfig.list;
|
||||
tabList.unshift({
|
||||
classPage: {
|
||||
id: 0
|
||||
},
|
||||
dataType: {
|
||||
tabVal: 0
|
||||
},
|
||||
microPage: {
|
||||
id: 0
|
||||
},
|
||||
text: {
|
||||
val: '首页'
|
||||
},
|
||||
})
|
||||
return tabList
|
||||
},
|
||||
hotWords() {
|
||||
return this.dataConfig.hotWords.list.filter(item => {
|
||||
return item.val;
|
||||
});
|
||||
},
|
||||
longItemStyle(){
|
||||
return {
|
||||
marginRight: `${this.dataConfig.contentConfig.val * 2}rpx`,
|
||||
fontSize: `${this.dataConfig.fontSize?.val * 2}rpx`,
|
||||
color: `${this.dataConfig.nameColor?.color[0]?.item}`
|
||||
};
|
||||
},
|
||||
logoUpImg() {
|
||||
let img = '';
|
||||
if(this.isScrolled && this.dataConfig.searchConfig.tabVal && this.dataConfig.logoUpConfig && this.dataConfig.logoUpConfig.url){
|
||||
img = this.dataConfig.logoUpConfig.url;
|
||||
}else{
|
||||
img = this.dataConfig.logoConfig.url;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var that = this
|
||||
// 获取设备宽度
|
||||
uni.getSystemInfo({
|
||||
success(e) {
|
||||
that.mainWidth = e.windowWidth
|
||||
that.isWidth = (e.windowWidth - 65) / 8
|
||||
}
|
||||
})
|
||||
that.imgUrls = that.dataConfig.swiperConfig.list;
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
that.hotWords.forEach(item => {
|
||||
if (item.val) {
|
||||
this.hotWordShow = true;
|
||||
}
|
||||
})
|
||||
that.computedHeight();
|
||||
uni.setStorageSync('hotList', that.hotWords);
|
||||
},
|
||||
methods: {
|
||||
goDetail(url) {
|
||||
let urls = url.info[1].value
|
||||
this.$util.JumpPath(urls);
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
swiperChange(e) {
|
||||
let {
|
||||
current,
|
||||
source
|
||||
} = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.swiperCur = e.detail.current;
|
||||
this.bgColor = this.imgUrls[e.detail.current]['img']
|
||||
}
|
||||
},
|
||||
computedHeight(){
|
||||
let that =this;
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: (res) => {
|
||||
let height = res.height * ((windowWidth - 20) / res.width)
|
||||
that.$set(that, 'imageH', height.toFixed(2));
|
||||
}
|
||||
})
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
textChange(e) {
|
||||
let {
|
||||
current,
|
||||
source
|
||||
} = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.searchVal = this.hotWords[e.detail.current]['val']
|
||||
}
|
||||
},
|
||||
/**显示全部分类*/
|
||||
showCategory() {
|
||||
this.isCategory = true;
|
||||
},
|
||||
/*跳转为页面*/
|
||||
changeTab(item, index) {
|
||||
if (this.tabClick == index) return;
|
||||
this.tabClick = index; //设置导航点击了哪一个
|
||||
this.isLeft = index * this.isWidth + 16; //设置下划线位置
|
||||
this.isCategory = false;
|
||||
let data = {
|
||||
type: item.dataType.tabVal, // 0 微页面 1 商品分类
|
||||
microPage: item.microPage.id,
|
||||
classPage: item.classPage.id,
|
||||
};
|
||||
this.$emit('bindSortId', data);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrollColor {
|
||||
transition: background-color .5s ease;
|
||||
background-color: #fff;
|
||||
color: #333 !important;
|
||||
|
||||
.longItem {
|
||||
// color: #333 !important;
|
||||
|
||||
&.click {
|
||||
&::after {
|
||||
background: #333 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page_count {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
filter: blur(0);
|
||||
overflow: hidden;
|
||||
image.active {
|
||||
opacity: 1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(30rpx);
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
// image {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// filter: blur(30rpx);
|
||||
// transform: scale(1.5);
|
||||
// }
|
||||
}
|
||||
}
|
||||
.bag-gradient{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.my-main {
|
||||
transition: background-color .5s ease;
|
||||
}
|
||||
|
||||
.swiperTxt {
|
||||
width: 300rpx;
|
||||
height: 100%;
|
||||
line-height: 58rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiperTxt .text {
|
||||
width: 480rpx;
|
||||
}
|
||||
|
||||
.swiperTxt .text .label {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c48;
|
||||
width: 64rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
border: 2rpx solid #ff4947;
|
||||
}
|
||||
|
||||
.swiperTxt .text .newsTitle {
|
||||
width: 300rpx;
|
||||
font-size: 24rpx;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
.swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mp-header {
|
||||
z-index: 99;
|
||||
// position: fixed;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&.on {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serch-box {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.serch-wrapper {
|
||||
align-items: center;
|
||||
/* #ifdef MP */
|
||||
padding: 0 220rpx 0 30rpx;
|
||||
/* #endif */
|
||||
/* #ifndef MP */
|
||||
padding: 0 30rpx;
|
||||
/* #endif */
|
||||
height: 100%;
|
||||
|
||||
&.on {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.input,
|
||||
.uninput {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 13rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabNav {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.navTabBox {
|
||||
color: #FFFFFF;
|
||||
padding: 0 57rpx 0 30rpx;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
// position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
// padding-top: 5px;
|
||||
|
||||
&.on {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
/* #ifdef MP */
|
||||
width: 640rpx;
|
||||
/* #endif */
|
||||
/* #ifndef MP */
|
||||
width: 666rpx;
|
||||
/* #endif */
|
||||
height: 82rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.click {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.longTab {
|
||||
// height: 34px;
|
||||
|
||||
.longItem {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
max-width: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
line-height: 82rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.click {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 57rpx;
|
||||
height: 45rpx;
|
||||
padding-left: 11rpx;
|
||||
line-height: 45rpx;
|
||||
z-index: 10;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.iconfont {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 2rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #FFFFFF 0%, rgba(216, 216, 216, 0) 100%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.isFixed {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.category_count {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 32rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
|
||||
.cate_count {
|
||||
.category_item {
|
||||
padding: 0 20rpx;
|
||||
height: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.clicks {
|
||||
background-color: var(--view-minorColorT);
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
z-index: 22;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.longItem,
|
||||
.click,
|
||||
.category text {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.underline {
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
.input,
|
||||
.uninput {
|
||||
background: rgba(0, 0, 0, 0.22) !important;
|
||||
}
|
||||
|
||||
.click {
|
||||
&::after {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiperBg {
|
||||
z-index: 1;
|
||||
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 15rpx;
|
||||
overflow-x: hidden;
|
||||
z-index: 20;
|
||||
padding: 5rpx 10rpx 0;
|
||||
|
||||
// uni-swiper {
|
||||
// height: 320rpx;
|
||||
// }
|
||||
|
||||
swiper-item {
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.swiper-item,
|
||||
image,
|
||||
.acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
swiper-item.active,
|
||||
swiper-item.scalex {
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*用来包裹所有的小圆点 */
|
||||
.dots {
|
||||
// width: 156rpx;
|
||||
// height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
left: 20rpx;
|
||||
bottom: 23rpx;
|
||||
}
|
||||
|
||||
/*未选中时的小圆点样式 */
|
||||
.dot1 {
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 16rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot2 {
|
||||
.dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 8rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
width: 18rpx;
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot4 {
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: #DDDDDD;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot3 {
|
||||
.dot {
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
.active {
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal {
|
||||
left: 90%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user