@10yun/cv-mobile-ui 0.5.51 → 0.5.52

package/ui-fireui/components/u-picture-cropper/u-picture-cropper.wxs

@@ -0,0 +1,582 @@
+var cropper = {
+CUT_START: null,
+cutX: 0, //画布x轴起点
+cutY: 0, //画布y轴起点0
+touchRelative: [{
+x: 0,
+y: 0
+}], //手指或鼠标和图片中心的相对位置
+flagCutTouch: false, //是否是拖动裁剪框
+hypotenuseLength: 0, //双指触摸时斜边长度
+flagEndTouch: false, //是否结束触摸
+canvasWidth: 0,
+canvasHeight: 0,
+imgWidth: 0, //图片宽度
+imgHeight: 0, //图片高度
+scale: 1, //图片缩放比
+angle: 0, //图片旋转角度
+imgTop: 0, //图片上边距
+imgLeft: 0, //图片左边距
+//是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+limitMove: true,
+minHeight: 0,
+maxHeight: 0,
+minWidth: 0,
+maxWidth: 0,
+windowHeight: 0,
+windowWidth: 0,
+init: true
+}
+
+function bool(str) {
+return str === 'true' || str == true ? true : false
+}
+
+function touchstart(e, ins) {
+//var instance = e.instance;
+// var state = instance.getState();
+var touch = e.touches || e.changedTouches;
+cropper.flagEndTouch = false;
+if (touch.length == 1) {
+cropper.touchRelative[0] = {
+x: touch[0].pageX - cropper.imgLeft,
+y: touch[0].pageY - cropper.imgTop
+};
+} else {
+var width = Math.abs(touch[0].pageX - touch[1].pageX);
+var height = Math.abs(touch[0].pageY - touch[1].pageY);
+cropper.touchRelative = [{
+x: touch[0].pageX - cropper.imgLeft,
+y: touch[0].pageY - cropper.imgTop
+},
+{
+x: touch[1].pageX - cropper.imgLeft,
+y: touch[1].pageY - cropper.imgTop
+}
+];
+cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+}
+
+}
+
+function moveDuring(ins) {
+if (!ins) return;
+ins.callMethod('moveDuring')
+}
+
+function moveStop(ins) {
+if (!ins) return;
+ins.callMethod('moveStop')
+};
+
+function setCutCenter(ins) {
+var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5;
+var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5;
+//顺序不能变
+cropper.imgTop = cropper.imgTop - cropper.cutY + cutY;
+cropper.cutY = cutY; //截取的框上边距
+cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX;
+cropper.cutX = cutX; //截取的框左边距
+styleUpdate(ins)
+cutDetectionPosition(ins)
+imgTransform(ins)
+updateData(ins)
+}
+
+function touchmove(e, ins) {
+var touch = e.touches || e.changedTouches;
+if (cropper.flagEndTouch) return;
+moveDuring(ins);
+if (e.touches.length == 1) {
+var left = touch[0].pageX - cropper.touchRelative[0].x,
+top = touch[0].pageY - cropper.touchRelative[0].y;
+cropper.imgLeft = left;
+cropper.imgTop = top;
+imgTransform(ins);
+imgMarginDetectionPosition(ins);
+} else {
+var res = e.instance.getDataset();
+var minScale = +res.minscale;
+var maxScale = +res.maxscale;
+var disableRotate = bool(res.disablerotate)
+var width = Math.abs(touch[0].pageX - touch[1].pageX),
+height = Math.abs(touch[0].pageY - touch[1].pageY),
+hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
+current_deg = 0;
+scale = scale
+<= minScale ? minScale : scale;
+		scale = scale>= maxScale ? maxScale : scale;
+cropper.scale = scale;
+imgMarginDetectionScale(ins, true);
+var touchRelative = [{
+x: touch[0].pageX - cropper.imgLeft,
+y: touch[0].pageY - cropper.imgTop
+},
+{
+x: touch[1].pageX - cropper.imgLeft,
+y: touch[1].pageY - cropper.imgTop
+}
+];
+if (!disableRotate) {
+var first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
+var first_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[0].y,
+cropper.touchRelative[0].x);
+var second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
+var second_atan_old = (180 / Math.PI) * Math.atan2(cropper.touchRelative[1].y,
+cropper.touchRelative[1].x);
+var first_deg = first_atan - first_atan_old,
+second_deg = second_atan - second_atan_old;
+if (first_deg != 0) {
+current_deg = first_deg;
+} else if (second_deg != 0) {
+current_deg = second_deg;
+}
+}
+cropper.touchRelative = touchRelative;
+cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+//更新视图
+cropper.angle = cropper.angle + current_deg;
+imgTransform(ins);
+}
+}
+
+function touchend(e, ins) {
+cropper.flagEndTouch = true;
+moveStop(ins);
+updateData(ins)
+}
+
+
+function cutTouchStart(e, ins) {
+var touch = e.touches || e.changedTouches;
+var currentX = touch[0].pageX;
+var currentY = touch[0].pageY;
+
+/*
+* (右下-1 右上-2 左上-3 左下-4)
+* left_x [3,4]
+* top_y [2,3]
+* right_x [1,2]
+* bottom_y [1,4]
+*/
+var left_x1 = cropper.cutX - 30;
+var left_x2 = cropper.cutX + 30;
+
+var top_y1 = cropper.cutY - 30;
+var top_y2 = cropper.cutY + 30;
+
+var right_x1 = cropper.cutX + cropper.canvasWidth - 30;
+var right_x2 = cropper.cutX + cropper.canvasWidth + 30;
+
+var bottom_y1 = cropper.cutY + cropper.canvasHeight - 30;
+var bottom_y2 = cropper.cutY + cropper.canvasHeight + 30;
+
+if (currentX > right_x1 && currentX
+< right_x2 && currentY> bottom_y1 && currentY
+< bottom_y2 ) {
+  moveDuring();
+  cropper.flagCutTouch= true;
+  cropper.flagEndTouch= true;
+  cropper.CUT_START= {
+  width: cropper.canvasWidth,
+  height: cropper.canvasHeight,
+  x: currentX,
+  y: currentY,
+  corner: 1
+  };
+  } else if (currentX> right_x1 && currentX
+< right_x2 && currentY> top_y1 && currentY
+< top_y2 ) {
+  moveDuring();
+  cropper.flagCutTouch= true;
+  cropper.flagEndTouch= true;
+  cropper.CUT_START= {
+  width: cropper.canvasWidth,
+  height: cropper.canvasHeight,
+  x: currentX,
+  y: currentY,
+  cutY: cropper.cutY,
+  cutX: cropper.cutX,
+  corner: 2
+  };
+  } else if (currentX> left_x1 && currentX
+< left_x2 && currentY> top_y1 && currentY
+< top_y2 ) {
+  moveDuring();
+  cropper.flagCutTouch= true;
+  cropper.flagEndTouch= true;
+  cropper.CUT_START= {
+  width: cropper.canvasWidth,
+  height: cropper.canvasHeight,
+  cutY: cropper.cutY,
+  cutX: cropper.cutX,
+  x: currentX,
+  y: currentY,
+  corner: 3
+  };
+  } else if (currentX> left_x1 && currentX
+< left_x2 && currentY> bottom_y1 && currentY
+< bottom_y2 ) {
+  moveDuring();
+  cropper.flagCutTouch= true;
+  cropper.flagEndTouch= true;
+  cropper.CUT_START= {
+  width: cropper.canvasWidth,
+  height: cropper.canvasHeight,
+  cutY: cropper.cutY,
+  cutX: cropper.cutX,
+  x: currentX,
+  y: currentY,
+  corner: 4
+  };
+  }
+  }
+  function cutTouchMove(e, ins) {
+  if (!cropper.CUT_START || cropper.CUT_START=== 'null') return;
+	if (cropper.flagCutTouch) {
+		var touch = e.touches || e.changedTouches;
+		var res = e.instance.getDataset();
+		var lockRatio = bool(res.lockratio);
+		var lockWidth = bool(res.lockwidth);
+		var lockHeight = bool(res.lockheight);
+		if (lockRatio && (lockWidth || lockHeight)) return;
+		var width = cropper.canvasWidth,
+			height = cropper.canvasHeight,
+			cutY = cropper.cutY,
+			cutX = cropper.cutX;
+
+		function size_correct() {
+			width = width
+<= cropper.maxWidth ? (width>= cropper.minWidth ? width : cropper.minWidth) : cropper.maxWidth;
+height = height
+<= cropper.maxHeight ? (height>= cropper.minHeight ? height : cropper.minHeight) : cropper.maxHeight;
+}
+
+function size_inspect() {
+if ((width > cropper.maxWidth || width
+< cropper.minWidth || height> cropper.maxHeight || height
+< cropper.minHeight ) &&
+  lockRatio) {
+  size_correct();
+  return false;
+  } else {
+  size_correct();
+  return true;
+  }
+  };
+  height= cropper.CUT_START.height + (cropper.CUT_START.corner> 1 && cropper.CUT_START.corner
+< 4 ? 1 : -1) * (
+			cropper.CUT_START.y - touch[0].pageY);
+		switch (cropper.CUT_START.corner) {
+			case 1:
+				width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				break;
+			case 2:
+				width = cropper.CUT_START.width - cropper.CUT_START.x + touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
+				break;
+			case 3:
+				width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutY = cropper.CUT_START.cutY - (height - cropper.CUT_START.height);
+				cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
+				break;
+			case 4:
+				width = cropper.CUT_START.width + cropper.CUT_START.x - touch[0].pageX;
+				if (lockRatio) {
+					height = width / (cropper.canvasWidth / cropper.canvasHeight);
+				}
+				if (!size_inspect()) return;
+				cutX = cropper.CUT_START.cutX - (width - cropper.CUT_START.width);
+				break;
+			default:
+				break;
+		}
+		if (!lockWidth && !lockHeight) {
+			cropper.canvasWidth = width;
+			cropper.cutX = cutX;
+			cropper.canvasHeight = height;
+			cropper.cutY = cutY;
+			canvasHeight(ins);
+			canvasWidth(ins);
+		} else if (!lockWidth) {
+			cropper.canvasWidth = width;
+			cropper.cutX = cutX;
+			canvasWidth(ins);
+		} else if (!lockHeight) {
+			cropper.canvasHeight = height;
+			cropper.cutY = cutY;
+			canvasHeight(ins);
+		}
+		styleUpdate(ins)
+		imgMarginDetectionScale(ins);
+	}
+}
+
+//检测剪裁框位置是否在允许的范围内(屏幕内)
+function cutDetectionPosition(ins) {
+	var windowHeight = cropper.windowHeight,
+		windowWidth = cropper.windowWidth;
+
+	function cutDetectionPositionTop() {
+		//检测上边距是否在范围内
+		if (cropper.cutY
+< 0) {
+			cropper.cutY = 0;
+		}
+		if (cropper.cutY> windowHeight - cropper.canvasHeight) {
+cropper.cutY = windowHeight - cropper.canvasHeight;
+}
+}
+
+function cutDetectionPositionLeft() {
+//检测左边距是否在范围内
+if (cropper.cutX
+< 0) {
+			cropper.cutX = 0;
+		}
+		if (cropper.cutX> windowWidth - cropper.canvasWidth) {
+cropper.cutX = windowWidth - cropper.canvasWidth;
+}
+}
+//裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+if (cropper.cutY == null && cropper.cutX == null) {
+var cutY = (windowHeight - cropper.canvasHeight) * 0.5;
+var cutX = (windowWidth - cropper.canvasWidth) * 0.5;
+cropper.cutY = cutY; //截取的框上边距
+cropper.cutX = cutX; //截取的框左边距
+} else if (cropper.cutY != null && cropper.cutX != null) {
+cutDetectionPositionTop();
+cutDetectionPositionLeft();
+} else if (cropper.cutY != null && cropper.cutX == null) {
+cutDetectionPositionTop();
+cropper.cutX = (windowWidth - cropper.canvasWidth) / 2;
+} else if (cropper.cutY == null && cropper.cutX != null) {
+cutDetectionPositionLeft();
+cropper.cutY = (windowHeight - cropper.canvasHeight) / 2;
+}
+
+styleUpdate(ins)
+}
+
+/**
+* 图片边缘检测-缩放
+*/
+function imgMarginDetectionScale(ins, delay) {
+if (!cropper.limitMove) return;
+var scale = cropper.scale;
+var imgWidth = cropper.imgWidth;
+var imgHeight = cropper.imgHeight;
+if ((cropper.angle / 90) % 2) {
+imgWidth = cropper.imgHeight;
+imgHeight = cropper.imgWidth;
+}
+if (imgWidth * scale
+< cropper.canvasWidth ) {
+  scale= cropper.canvasWidth / imgWidth;
+  }
+  if (imgHeight * scale
+< cropper.canvasHeight ) {
+  scale= Math.max(scale, cropper.canvasHeight / imgHeight);
+  }
+  imgMarginDetectionPosition(ins, scale, delay);
+  }
+/
+  **
+  * 图片边缘检测-位置
+  */
+  function imgMarginDetectionPosition(ins, scale, delay) {
+  if (!cropper.limitMove) return;
+  var left= cropper.imgLeft;
+  var top= cropper.imgTop;
+  scale= scale || cropper.scale;
+  var imgWidth= cropper.imgWidth;
+  var imgHeight= cropper.imgHeight;
+  if ((cropper.angle / 90) % 2) {
+  imgWidth= cropper.imgHeight;
+  imgHeight= cropper.imgWidth;
+  }
+  left= cropper.cutX + (imgWidth * scale) / 2>= left ? left : cropper.cutX + (imgWidth * scale) / 2;
+left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2
+<= left ? left : cropper.cutX + cropper.canvasWidth -
+		(imgWidth * scale) / 2;
+	top = cropper.cutY + (imgHeight * scale) / 2>= top ? top : cropper.cutY + (imgHeight * scale) / 2;
+top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2
+<= top ? top : cropper.cutY + cropper.canvasHeight -
+		(imgHeight * scale) / 2;
+
+	cropper.imgLeft = left;
+	cropper.imgTop = top;
+	cropper.scale = scale;
+	styleUpdate(ins)
+	if (!delay || delay === 'null') {
+		imgTransform(ins);
+	}
+}
+
+
+function cutTouchEnd(e, ins) {
+	moveStop(ins);
+	cropper.flagCutTouch = false;
+	updateData(ins)
+}
+
+
+//改变截取框大小
+function computeCutSize(ins) {
+	if (cropper.canvasWidth> cropper.windowWidth) {
+cropper.canvasWidth = cropper.windowWidth;
+// canvasWidth(ins)
+} else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
+cropper.cutX = cropper.windowWidth - cropper.cutX;
+}
+if (cropper.canvasHeight > cropper.windowHeight) {
+cropper.canvasHeight = cropper.windowHeight;
+// canvasHeight(ins)
+} else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
+cropper.cutY = cropper.windowHeight - cropper.cutY;
+}
+// styleUpdate(ins)
+}
+
+function styleUpdate(ins) {
+if (!ins) return;
+ins.selectComponent('.up-cropper-box').setStyle({
+'width': cropper.canvasWidth + 'px',
+'height': cropper.canvasHeight + 'px'
+})
+ins.selectComponent('.up-content-middle').setStyle({
+'height': cropper.canvasHeight + 'px'
+})
+ins.selectComponent('.up-content-top').setStyle({
+'height': cropper.cutY + 'px'
+})
+ins.selectComponent('.up-wxs-bg').setStyle({
+'width': cropper.cutX + 'px'
+})
+
+}
+
+function imgTransform(ins) {
+var owner = ins.selectComponent('.up-cropper-image')
+if (!owner) return
+var x = cropper.imgLeft - cropper.imgWidth / 2;
+var y = cropper.imgTop - cropper.imgHeight / 2;
+owner.setStyle({
+'transform': 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + cropper.scale + ') rotate(' +
+cropper.angle + 'deg)'
+})
+}
+
+function imageReset(ins) {
+cropper.scale = 1;
+cropper.angle = 0;
+imgTransform(ins);
+}
+//监听截取框宽高变化
+function canvasWidth(ins) {
+if (cropper.canvasWidth
+< cropper.minWidth ) {
+  cropper.canvasWidth= cropper.minWidth;
+  }
+  if (!ins) return;
+  computeCutSize(ins);
+  }
+  function canvasHeight(ins) {
+  if (cropper.canvasHeight
+< cropper.minHeight ) {
+  cropper.canvasHeight= cropper.minHeight;
+  }
+  if (!ins) return;
+  computeCutSize(ins);
+  }
+  function updateData(ins) {
+  if (!ins) return;
+  ins.callMethod('change' , {
+  cutX: cropper.cutX,
+  cutY: cropper.cutY,
+  canvasWidth: cropper.canvasWidth,
+  canvasHeight: cropper.canvasHeight,
+  imgWidth: cropper.imgWidth,
+  imgHeight: cropper.imgHeight,
+  scale: cropper.scale,
+  angle: cropper.angle,
+  imgTop: cropper.imgTop,
+  imgLeft: cropper.imgLeft
+  })
+  }
+  function propsChange(prop, oldProp, ownerInstance, ins) {
+  if (prop && prop !== 'null') {
+		var params = prop.split(',')
+		var type = +params[0]
+		var dataset = ins.getDataset();
+		if (cropper.init || type == 4) {
+			cropper.maxHeight = +dataset.maxheight;
+			cropper.minHeight = +dataset.minheight;
+			cropper.maxWidth = +dataset.maxwidth;
+			cropper.minWidth = +dataset.minwidth;
+			cropper.canvasWidth = +dataset.width;
+			cropper.canvasHeight = +dataset.height;
+			cropper.imgTop = dataset.windowheight / 2;
+			cropper.imgLeft = dataset.windowwidth / 2;
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+			cropper.windowHeight = +dataset.windowheight;
+			cropper.windowWidth = +dataset.windowwidth;
+			cropper.init = false
+		} else if (type == 2) {
+			cropper.imgWidth = +dataset.imgwidth;
+			cropper.imgHeight = +dataset.imgheight;
+		}
+		cropper.limitMove = bool(dataset.limitmove);
+		cropper.angle = +dataset.angle;
+		if (type == 3) {
+			imgTransform(ownerInstance);
+		}
+		switch (type) {
+			case 1:
+				setCutCenter(ownerInstance);
+				//设置裁剪框大小>设置图片尺寸>绘制canvas
+				computeCutSize(ownerInstance);
+				//检查裁剪框是否在范围内
+				cutDetectionPosition(ownerInstance);
+				break;
+			case 2:
+				setCutCenter(ownerInstance);
+				break;
+			case 3:
+				imgMarginDetectionScale(ownerInstance)
+				break;
+			case 4:
+				imageReset(ownerInstance);
+				break;
+			case 5:
+				setCutCenter(ownerInstance);
+				break;
+			default:
+				break;
+		}
+	}
+}
+
+export default {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	cutTouchStart: cutTouchStart,
+	cutTouchMove: cutTouchMove,
+	cutTouchEnd: cutTouchEnd,
+	propsChange: propsChange
+}

package/ui-fireui/components/{fui-round-progress/fui-round-progress.vue → u-round-progress/u-round-progress.vue}

@@ -1,5 +1,5 @@
 <template>
-  <view class="fui-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+  <view class="up-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
     <canvas
       :start="percent"
       :change:start="parse.initDraw"
@@ -300,7 +300,7 @@ export default {
 </script>
 
 <style scoped>
-.fui-circular-container {
+.up-circular-container {
   position: relative;
 }
 </style>

package/ui-fireui/components/{fui-scroll-top/fui-scroll-top.vue → u-scroll-top/u-scroll-top.vue}

@@ -1,29 +1,29 @@
 <template>
   <view
-    class="fui-scroll-top_box"
+    class="up-scroll-top_box"
     v-show="isIndex || isShare || (visible && toggle)"
     :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }"
   >
-    <view class="fui-scroll-top_item" v-if="isIndex" @tap.stop="goIndex">
-      <image class="fui-scroll-top_img" :src="indexIcon"></image>
-      <view class="fui-scroll-top_text">首页</view>
+    <view class="up-scroll-top_item" v-if="isIndex" @tap.stop="goIndex">
+      <image class="up-scroll-top_img" :src="indexIcon"></image>
+      <view class="up-scroll-top_text">首页</view>
     </view>
-    <button open-type="share" class="fui-share-btn" v-if="isShare && !customShare">
-      <view class="fui-scroll-top_item" :class="{ 'fui-scroll-item_top': isIndex }">
-        <image class="fui-scroll-top_img" :src="shareIcon"></image>
+    <button open-type="share" class="up-share-btn" v-if="isShare && !customShare">
+      <view class="up-scroll-top_item" :class="{ 'up-scroll-item_top': isIndex }">
+        <image class="up-scroll-top_img" :src="shareIcon"></image>
       </view>
     </button>
-    <view class="fui-scroll-top_item" :class="{ 'fui-scroll-item_top': isIndex }" v-if="isShare && customShare" @tap.stop="share">
-      <image class="fui-scroll-top_img" :src="shareIcon"></image>
+    <view class="up-scroll-top_item" :class="{ 'up-scroll-item_top': isIndex }" v-if="isShare && customShare" @tap.stop="share">
+      <image class="up-scroll-top_img" :src="shareIcon"></image>
     </view>
     <view
-      class="fui-scroll-top_item"
-      :class="{ 'fui-scroll-item_top': isIndex || isShare }"
+      class="up-scroll-top_item"
+      :class="{ 'up-scroll-item_top': isIndex || isShare }"
       v-show="visible && toggle"
       @tap.stop="goTop"
     >
-      <image class="fui-scroll-top_img" :src="topIcon"></image>
-      <view class="fui-scroll-top_text fui-color-white">顶部</view>
+      <image class="up-scroll-top_img" :src="topIcon"></image>
+      <view class="up-scroll-top_text up-color-white">顶部</view>
     </view>
   </view>
 </template>
@@ -135,7 +135,7 @@ export default {
 </script>
 
 <style scoped>
-.fui-scroll-top_box {
+.up-scroll-top_box {
   width: 80rpx;
   height: 270rpx;
   position: fixed;
@@ -145,23 +145,23 @@ export default {
   font-weight: 400;
 }
 
-.fui-scroll-top_item {
+.up-scroll-top_item {
   width: 80rpx;
   height: 80rpx;
   position: relative;
 }
 
-.fui-scroll-item_top {
+.up-scroll-item_top {
   margin-top: 30rpx;
 }
 
-.fui-scroll-top_img {
+.up-scroll-top_img {
   width: 80rpx;
   height: 80rpx;
   display: block;
 }
 
-.fui-scroll-top_text {
+.up-scroll-top_text {
   width: 80rpx;
   text-align: center;
   font-size: 24rpx;
@@ -173,17 +173,17 @@ export default {
   bottom: 15rpx;
 }
 
-.fui-color-white {
+.up-color-white {
   color: #fff;
 }
-.fui-share-btn {
+.up-share-btn {
   background: transparent !important;
   padding: 0;
   margin: 0;
   display: inline;
   border: 0;
 }
-.fui-share-btn::after {
+.up-share-btn::after {
   border: 0;
 }
 </style>