1
This commit is contained in:
@@ -0,0 +1,723 @@
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- @vue-docgen-ignore-next-line -->
|
||||
<script module="xfs" lang="wxs" src="./xfs.wxs"></script>
|
||||
<!-- #endif -->
|
||||
<script lang="ts">
|
||||
import { type PropType } from "vue"
|
||||
import { getUid } from "../../core/util/xCoreUtil.uts"
|
||||
import { getDefaultColor } from "../../core/util/xCoreColorUtil.uts"
|
||||
import { checkIsCssUnit,rpx2px } from "../../core/util/xCoreUtil.uts"
|
||||
import { xConfig } from "../../config/xConfig.uts"
|
||||
|
||||
/**
|
||||
* @name 单滑块 xSlider
|
||||
* @description 此为单向滑块,双向滑块见:x-slider-double
|
||||
* @page /pages/index/slider
|
||||
* @category 表单组件
|
||||
* @constant 平台兼容
|
||||
* | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 0,
|
||||
_val: 0,
|
||||
_moving_val:0,
|
||||
boxwidth: 0,
|
||||
boxheight: 0,
|
||||
id: ("xSlider" + getUid()) as string,
|
||||
bgId: ("xSliderbgId" + getUid()) as string,
|
||||
btnId: ("xSlider" + getUid()) as string,
|
||||
_x:0,
|
||||
_now_x:0,
|
||||
boxLeft:0,
|
||||
bgWidth:0,
|
||||
isMoveing:false
|
||||
}
|
||||
},
|
||||
emits: [
|
||||
/**
|
||||
* 拖动变换时触发
|
||||
* @param {number} value - 当前的值
|
||||
*/
|
||||
'change', 'update:modelValue'
|
||||
],
|
||||
props: {
|
||||
/**
|
||||
* 等同v-model当前的值
|
||||
*/
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 最大值
|
||||
*/
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
/**
|
||||
* 最小值
|
||||
*/
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 步进值
|
||||
*/
|
||||
step: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 步进值刻度值
|
||||
* 比如max-min为100总值,刻度为20,那么setpCount就是4,
|
||||
*/
|
||||
stepCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 激活时的颜色，空值取全局值
|
||||
*/
|
||||
color: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 默认的背景色
|
||||
*/
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "info"
|
||||
},
|
||||
/**
|
||||
* 滑条的大小
|
||||
*/
|
||||
size: {
|
||||
type: String,
|
||||
default: "3"
|
||||
},
|
||||
/**
|
||||
* 滑块的尺寸
|
||||
*/
|
||||
btnSize: {
|
||||
type: String,
|
||||
default: "24"
|
||||
},
|
||||
/**
|
||||
* 滑条的圆角。
|
||||
* 为空值时，取全局的进度条值
|
||||
*/
|
||||
round: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否显示进度条上的label文本
|
||||
*/
|
||||
showLabel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 文本颜色
|
||||
*/
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: "black"
|
||||
},
|
||||
/**
|
||||
* 文本文字大小
|
||||
*/
|
||||
labelFontSize: {
|
||||
type: String,
|
||||
default: "12"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_stepCount():number{
|
||||
return this.stepCount;
|
||||
},
|
||||
_round() : string {
|
||||
if (this.round == "") {
|
||||
return checkIsCssUnit(xConfig.progressRadius, xConfig.unit)
|
||||
}
|
||||
return checkIsCssUnit(this.round, xConfig.unit)
|
||||
},
|
||||
_size() : string {
|
||||
return checkIsCssUnit(this.size, xConfig.unit)
|
||||
},
|
||||
|
||||
_labelColor() : string {
|
||||
return getDefaultColor(this.labelColor)
|
||||
},
|
||||
_labelFontSize() : string {
|
||||
return checkIsCssUnit(this.labelFontSize, xConfig.unit)
|
||||
},
|
||||
_showLabel() : boolean {
|
||||
return this.showLabel
|
||||
},
|
||||
_color() : string {
|
||||
if (this.color == "") return getDefaultColor(xConfig.color)
|
||||
return getDefaultColor(this.color)
|
||||
},
|
||||
_bgColor() : string {
|
||||
return getDefaultColor(this.bgColor)
|
||||
},
|
||||
_max() : number {
|
||||
return this.max
|
||||
},
|
||||
_min() : number {
|
||||
return this.min
|
||||
},
|
||||
_step() : number {
|
||||
// 优化：移除100的限制，使用实际的max值进行计算
|
||||
let range = this._max - this._min;
|
||||
if (range === 0) return 0;
|
||||
|
||||
let stepPercentage = (this.step / range) * 100;
|
||||
return this.ProToWidthByval(stepPercentage)
|
||||
},
|
||||
_disabled() : boolean {
|
||||
return this.disabled
|
||||
},
|
||||
_btnSize():number{
|
||||
let p = parseInt(this.btnSize);
|
||||
let covertp = checkIsCssUnit(p,xConfig.unit)
|
||||
p = parseFloat(covertp)
|
||||
return Math.floor(p)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this._val = this.modelValue
|
||||
this._moving_val = this.modelValue;
|
||||
this.percentage = this.valueToPro(this._val);
|
||||
this.getNodes();
|
||||
// 兼容电脑端
|
||||
// #ifdef WEB
|
||||
window.addEventListener('mouseup', this.mmEnd);
|
||||
window.addEventListener('mousemove', this.mmMove);
|
||||
// #endif
|
||||
|
||||
uni.$on("onResize",this.getNodes)
|
||||
},
|
||||
beforeUnmount(){
|
||||
// 兼容电脑端
|
||||
// #ifdef WEB
|
||||
window.removeEventListener('mouseup', this.mmEnd);
|
||||
window.removeEventListener('mousemove', this.mmMove);
|
||||
// #endif
|
||||
uni.$off("onResize",this.getNodes)
|
||||
},
|
||||
|
||||
watch: {
|
||||
modelValue(newval : number) {
|
||||
if(newval== this._val) return
|
||||
this._val = newval
|
||||
this._moving_val = newval
|
||||
this.percentage = this.valueToPro(this._val);
|
||||
this.getNodes()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
setOpts(opts){
|
||||
this.isMoving = opts.isMoving
|
||||
},
|
||||
setMoveChanges(opts){
|
||||
// 优化：移除Math.ceil，保持原始精度
|
||||
this.percentage = this.widthToPro(opts.x);
|
||||
let nowval = this.proToValue(this.percentage);
|
||||
if(this.step>0){
|
||||
nowval = this.getNearestTick(this.max,this.min,this.step,nowval);
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖动变换时触发
|
||||
* @param {number} value 当前的值
|
||||
*/
|
||||
this.$emit('change',nowval)
|
||||
this._moving_val = nowval;
|
||||
},
|
||||
setEnd(){
|
||||
this.isMoveing = false
|
||||
this._val = this.proToValue(this.percentage);
|
||||
this.boxLeft = this.ProToWidthByval(this.percentage)
|
||||
/**
|
||||
* 松开拖动按钮时触发同步值，等同v-model
|
||||
* @param {number} value 当前的值
|
||||
*/
|
||||
this.$emit('update:modelValue',this._val)
|
||||
},
|
||||
// #endif
|
||||
getFontSize(k:string):string{
|
||||
return checkIsCssUnit(k,xConfig.unit)
|
||||
},
|
||||
getNodes() {
|
||||
uni.createSelectorQuery().in(this)
|
||||
.select(".xSlider")
|
||||
.boundingClientRect().exec((ret) => {
|
||||
let nodeinfo = ret[0] as NodeInfo;
|
||||
this.boxwidth = nodeinfo.width!;
|
||||
this.boxheight = nodeinfo.height!;
|
||||
this.boxLeft = this.ProToWidth()
|
||||
this.bgWidth = this.boxLeft + (this._btnSize / 2) + 2 - 0.5
|
||||
// #ifdef MP-WEIXIN
|
||||
let node = this.$refs['btnId'] as UniElement
|
||||
let bgNode = this.$refs['bgId'] as UniElement
|
||||
node.style.setProperty("left",this.boxLeft +"px")
|
||||
bgNode.style.setProperty("width",`${this.bgWidth}px`)
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
this.$nextTick(()=>{
|
||||
this.bgWidth+=0.5
|
||||
})
|
||||
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 比例转值
|
||||
*/
|
||||
proToValue(val : number) : number {
|
||||
const minValue = Math.min(this._min, this._max);
|
||||
const maxValue = Math.max(this._min, this._max);
|
||||
if (minValue === maxValue) {
|
||||
return minValue;
|
||||
}
|
||||
// 优化：使用Math.round代替Math.ceil，提高精度
|
||||
return Math.round((val / 100) * (maxValue - minValue) + minValue);
|
||||
},
|
||||
/**
|
||||
* 值转比例
|
||||
*/
|
||||
valueToPro(val : number) : number {
|
||||
let min = Math.min(this._min, this._max);
|
||||
let max = Math.max(this._min, this._max);
|
||||
let realval = Math.max(Math.min(val, max), min);
|
||||
return (realval - min) / (max - min) * 100;
|
||||
},
|
||||
// 位置宽转比例
|
||||
widthToPro(val:number):number{
|
||||
let maxWidth = this.boxwidth - this._btnSize;
|
||||
if (maxWidth === 0) return 0;
|
||||
let bl = val / maxWidth;
|
||||
// 优化：保持原始精度，不进行额外的舍入
|
||||
return bl * 100
|
||||
},
|
||||
// 比例转位置.
|
||||
ProToWidthByval(percentage:number):number{
|
||||
let maxWidth = this.boxwidth - this._btnSize;
|
||||
let val = maxWidth * percentage / 100;
|
||||
// 优化：使用Math.round代替Math.floor，提高精度
|
||||
return Math.round(val)
|
||||
},
|
||||
// 比例转位置.
|
||||
ProToWidth():number{
|
||||
let maxWidth = this.boxwidth - this._btnSize;
|
||||
let val = maxWidth * this.percentage / 100;
|
||||
// 优化：使用Math.round代替Math.floor，提高精度
|
||||
return Math.round(val)
|
||||
},
|
||||
mStart(evt:UniTouchEvent){
|
||||
if(this._disabled) return
|
||||
evt.stopPropagation()
|
||||
evt.preventDefault()
|
||||
let node = this.$refs['btnId'] as UniElement
|
||||
|
||||
let leftpos = parseInt(node.style.getPropertyValue("left")! as string)
|
||||
this._x = evt.changedTouches[0].clientX - leftpos
|
||||
this._now_x = evt.changedTouches[0].clientX
|
||||
this.isMoveing = true
|
||||
|
||||
},
|
||||
getNearestTick(max:number, min:number, step:number, nowValue:number):number {
|
||||
// 确保 nowValue 在 min 和 max 之间
|
||||
if (nowValue < min) {
|
||||
return min;
|
||||
}
|
||||
if (nowValue > max) {
|
||||
return max;
|
||||
}
|
||||
|
||||
// 计算最近的刻度值
|
||||
const ticks = Math.round((nowValue - min) / step);
|
||||
const nearestValue = min + ticks * step;
|
||||
|
||||
// 确保 nearestValue 不超过 max
|
||||
return Math.min(nearestValue, max);
|
||||
},
|
||||
/**
|
||||
* 判断b离a和c的距离返回最近的值
|
||||
*/
|
||||
isLeftOrRight(a:number,b:number,c:number,diffX:number):number{
|
||||
if(diffX>0){
|
||||
return c;
|
||||
}else if(diffX<0){
|
||||
return a;
|
||||
}
|
||||
return b;
|
||||
},
|
||||
// 滑动条上被点击.
|
||||
sliderClick(evt:UniPointerEvent){
|
||||
if(this._disabled){
|
||||
return;
|
||||
}
|
||||
let node = this.$refs['xSlider'] as UniElement
|
||||
node.getBoundingClientRectAsync()!.then((result:DOMRect|null)=>{
|
||||
if(result!=null){
|
||||
const leftpos = (result as DOMRect).left
|
||||
const maxwidth = (result as DOMRect).width - this._btnSize
|
||||
let diffX = evt.clientX - leftpos
|
||||
diffX = Math.max(0,Math.min(diffX,maxwidth))
|
||||
// 优化：移除Math.ceil，保持原始精度
|
||||
let percentage = this.widthToPro(diffX);
|
||||
this.percentage = percentage
|
||||
let nowval = this.proToValue(this.percentage);
|
||||
|
||||
// #ifndef WEB
|
||||
let node = this.$refs['btnId'] as UniElement
|
||||
let bgNode = this.$refs['bgId'] as UniElement
|
||||
node.style.setProperty("left",`${diffX}px`)
|
||||
// 修复：背景宽度应该与按钮位置保持一致
|
||||
bgNode.style.setProperty("width",`${diffX + (this._btnSize / 2) + 2}px`)
|
||||
// #endif
|
||||
|
||||
// #ifdef WEB
|
||||
this.boxLeft = diffX
|
||||
// 修复：背景宽度应该与按钮位置保持一致
|
||||
this.bgWidth = diffX + (this._btnSize / 2) + 2
|
||||
// #endif
|
||||
this._moving_val = nowval;
|
||||
this.$emit('update:modelValue',nowval)
|
||||
this.$emit('change', nowval)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
mMove(evt:UniTouchEvent){
|
||||
evt.stopPropagation()
|
||||
evt.preventDefault()
|
||||
if(this._disabled) return
|
||||
let node = this.$refs['btnId'] as UniElement
|
||||
let bgNode = this.$refs['bgId'] as UniElement
|
||||
|
||||
let x = evt.changedTouches[0].clientX - this._x
|
||||
let diffX = evt.changedTouches[0].clientX - this._now_x
|
||||
let maxX = this.boxwidth - this._btnSize;
|
||||
if(this.step>0){
|
||||
let step = this._step;
|
||||
let distanceToMove = Math.abs(diffX);
|
||||
|
||||
// 优化：使用Math.round代替Math.floor，提高步值对齐精度
|
||||
let qz = Math.round(x / step) * step;
|
||||
|
||||
if (distanceToMove>1) {
|
||||
x = this.isLeftOrRight(qz-step,x,qz+step,diffX);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
x = Math.max(Math.min(maxX,x),0)
|
||||
// #ifdef APP
|
||||
node.style.setProperty("left",`${x}px`)
|
||||
// 修复：背景宽度应该与按钮位置保持一致
|
||||
bgNode.style.setProperty("width",`${x + (this._btnSize / 2) + 2}px`)
|
||||
// #endif
|
||||
|
||||
// #ifdef WEB
|
||||
this.boxLeft = x
|
||||
// 修复：背景宽度应该与按钮位置保持一致
|
||||
this.bgWidth = x + (this._btnSize / 2) + 2
|
||||
// #endif
|
||||
|
||||
// 优化：移除Math.ceil，保持原始精度
|
||||
this.percentage = this.widthToPro(x);
|
||||
let nowval = this.proToValue(this.percentage);
|
||||
if(this.step>0){
|
||||
nowval = this.getNearestTick(this.max,this.min,this.step,nowval);
|
||||
}
|
||||
/**
|
||||
* 拖动变换时触发
|
||||
* @param {number} value 当前的值
|
||||
*/
|
||||
this.$emit('change',nowval)
|
||||
this._moving_val = nowval;
|
||||
},
|
||||
mEnd(evt:UniTouchEvent){
|
||||
this.isMoveing = false
|
||||
this._val = this.proToValue(this.percentage);
|
||||
this.boxLeft = this.ProToWidthByval(this.percentage)
|
||||
/**
|
||||
* 松开拖动按钮时触发同步值，等同v-model
|
||||
* @param {number} value 当前的值
|
||||
*/
|
||||
this.$emit('update:modelValue',this._val)
|
||||
|
||||
},
|
||||
// #ifdef WEB
|
||||
// 兼容web
|
||||
mmStart(evt:UniMouseEvent){
|
||||
|
||||
if(this._disabled) return
|
||||
evt.preventDefault()
|
||||
window.sliderId = this.id;
|
||||
let node = this.$refs['btnId'] as UniElement
|
||||
let leftpos = parseInt(node.style.getPropertyValue("left")! as string)
|
||||
this._x = evt.clientX - leftpos
|
||||
this._now_x = evt.clientX
|
||||
this.isMoveing = true
|
||||
},
|
||||
// 兼容web
|
||||
mmMove(evt:UniMouseEvent){
|
||||
if(window.sliderId!=this.id) return;
|
||||
evt.stopPropagation()
|
||||
evt.preventDefault()
|
||||
if(this._disabled||!this.isMoveing) return
|
||||
let node = this.$refs['btnId'] as UniElement
|
||||
let bgNode = this.$refs['bgId'] as UniElement
|
||||
|
||||
|
||||
let x = Math.ceil(evt.clientX - this._x)
|
||||
let diffX = evt.clientX - this._now_x
|
||||
let maxX = this.boxwidth - this._btnSize;
|
||||
if(this.step>0){
|
||||
let step = this._step;
|
||||
let distanceToMove = Math.abs(diffX);
|
||||
// 优化：使用Math.round代替Math.floor，提高步值对齐精度
|
||||
let qz = Math.round(x / step) * step;
|
||||
|
||||
if (distanceToMove>1) {
|
||||
x = this.isLeftOrRight(qz-step,x,qz+step,diffX);
|
||||
}
|
||||
}
|
||||
|
||||
x = Math.max(Math.min(maxX,x),0)
|
||||
|
||||
|
||||
// #ifdef APP || MP-WEIXIN
|
||||
node.style.setProperty("left",`${x}px`)
|
||||
// 修复：背景宽度应该与按钮位置保持一致
|
||||
bgNode.style.setProperty("width",`${x + (this._btnSize / 2) + 2}px`)
|
||||
// #endif
|
||||
|
||||
// #ifdef WEB
|
||||
this.boxLeft = x
|
||||
// 修复：背景宽度应该与按钮位置保持一致
|
||||
this.bgWidth = x + (this._btnSize / 2) + 2
|
||||
// #endif
|
||||
|
||||
|
||||
// 优化：移除Math.ceil，保持原始精度
|
||||
this.percentage = this.widthToPro(x);
|
||||
let nowval = this.proToValue(this.percentage);
|
||||
if(this.step>0){
|
||||
nowval = this.getNearestTick(this.max,this.min,this.step,nowval);
|
||||
}
|
||||
/**
|
||||
* 拖动变换时触发
|
||||
* @param {number} value 当前的值
|
||||
*/
|
||||
this.$emit('change',nowval)
|
||||
this._moving_val = nowval;
|
||||
},
|
||||
// 兼容web
|
||||
mmEnd(evt:UniMouseEvent){
|
||||
if(window.sliderId!=this.id) return;
|
||||
this.isMoveing = false
|
||||
/**
|
||||
* 松开拖动按钮时触发同步值，等同v-model
|
||||
* @param {number} value 当前的值
|
||||
*/
|
||||
this.$emit('update:modelValue',this.proToValue(this.percentage))
|
||||
},
|
||||
// #endif
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="xSliderBox" >
|
||||
|
||||
<view :id="id" class="xSlider" ref="xSlider" :style="{height:_btnSize+'px',overflow:'visible'}">
|
||||
<view @click="sliderClick" class="xSliderBgBox" :style="{backgroundColor:_bgColor,height:_size,borderRadius:_round,flex:'1'}">
|
||||
<view ref="bgId" :id="bgId" class="xSliderBg"
|
||||
:style="{backgroundColor:_color,width:`${bgWidth}px`}">
|
||||
</view>
|
||||
</view>
|
||||
<view class="xSliderBgKedu" :style="{paddingRight:_btnSize+'px'}">
|
||||
<view ></view>
|
||||
<view class="xSliderBgKeduKeyDuitem" :style="{marginLeft:(_btnSize)+'px'}" v-for="(item,index) in _stepCount" :key="index"></view>
|
||||
<view ></view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #ifdef WEB || MP-WEIXIN -->
|
||||
<view
|
||||
:id="btnId"
|
||||
ref="btnId"
|
||||
|
||||
<!-- #ifdef WEB-->
|
||||
@touchstart.stop="mStart"
|
||||
@touchmove.stop="mMove"
|
||||
@touchend="mEnd"
|
||||
@mousedown="mmStart"
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
@touchstart.stop="xfs.mStart"
|
||||
@touchmove.stop="xfs.mMove"
|
||||
@touchend="xfs.mEnd"
|
||||
:data-opts="{
|
||||
disabled:_disabled,
|
||||
max:max,
|
||||
min:min,
|
||||
step:step,
|
||||
_step:_step,
|
||||
btnSize:_btnSize,
|
||||
boxwidth:boxwidth
|
||||
}"
|
||||
<!-- #endif -->
|
||||
|
||||
:class="[isMoveing?'xSliderBtnHover':'']"
|
||||
:style="{left:boxLeft+'px',height:_btnSize+'px',width:_btnSize+'px',backgroundColor:_color}"
|
||||
class="xSliderBtn"
|
||||
></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<view
|
||||
:id="btnId"
|
||||
ref="btnId"
|
||||
:class="[isMoveing?'xSliderBtnHover':'']"
|
||||
@touchstart="mStart"
|
||||
@touchmove="mMove"
|
||||
@touchend="mEnd"
|
||||
:style="{left:boxLeft+'px',height:_btnSize+'px',width:_btnSize+'px',backgroundColor:_color}"
|
||||
class="xSliderBtn"
|
||||
></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!--
|
||||
@slot 右插槽
|
||||
@prop {number} value - 当前的值
|
||||
@prop {number} percentage - 当前的百分比值
|
||||
-->
|
||||
<slot name="right" :value="_val" :percentage="percentage.toFixed(0)">
|
||||
<view v-if="showLabel" class="xSliderBoxRight" :style="{width:getFontSize('36')}">
|
||||
<x-text :color="(isMoveing?_color:_labelColor)" :font-size="_labelFontSize" :style="{textAlign:'right'}">{{_moving_val}}</x-text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped>
|
||||
.xSliderBgBox{
|
||||
/* #ifdef MP-WEIXIN||WEB */
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
.xSliderBox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xSliderBoxRight {
|
||||
/* width: 36px; */
|
||||
}
|
||||
.xSliderBoxLeft{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.xSlider {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xSliderBtn {
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
border: 4px solid #ffffff;
|
||||
|
||||
border-radius: 100px;
|
||||
z-index: 2;
|
||||
/* #ifndef APP */
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
cursor: grab;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
.xSliderBtnHover{
|
||||
border: 2px solid #ffffff;
|
||||
}
|
||||
|
||||
/* #ifdef WEB */
|
||||
.xSliderBtn:active{
|
||||
cursor: grabbing;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
|
||||
|
||||
.xSliderBg {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.xSliderBgKedu {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.xSliderBgKeduKeyDuitem{
|
||||
width:5px;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.xSliderBtn {
|
||||
height: 100%;
|
||||
/* background-color: yellow; */
|
||||
padding: 0rpx 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xSliderTxt {}
|
||||
</style>
|
||||
Reference in New Issue
Block a user