components/en-utils/en-nav/en-nav.vue

@@ -1,192 +1,204 @@
 <template>
-  <view class="" :style="[{ 'background':bgckgroundBox}]">
-    <view class="header"  :style="[{'height': customBarH + 'px','background':bgckgroundBox, 'padding-top': statusBarH + 'px'}]">
-      <view class="flexbox" :style="[{'height': customBarH + 'px'}]">
-        <view class="left-button" @tap="goBack">
-          <image class="back-img"  :src="'/static/img/common/back'+(titleColor==='#fff'?'-white':'')+'.png'" mode="aspectFill"></image>
-        </view>
-
-        <view class="title-text sys-height-44"  :style="[{'marginLeft':left +'px','color':titleColor}]">{{title}}</view>
-        <view  class="right-button button" @click="rightClick">
-          <view class="right-data" v-if="rightShow">
-            <text class="rightName  sys-weight-600" :style="[{'color':titleColor}]" v-if="rightType===1">{{rightText}}</text>
-            <slot name="right" v-else>   </slot>
-          </view>
-        </view>
-      </view>
-    </view>
-    <view class="box-title">
-      <view class="" :style="[{'height': (customBarH+statusBarH) + 'px', 'padding-top': statusBarH + 'px'}]">
-      </view>
-    </view>
-  </view>
+	<view class="" :style="[{ 'background':bgckgroundBox,'transition-property':isT}]">
+		<view class="header"
+			:style="[{'height': customBarH + 'px','background':bgckgroundBox, 'padding-top': statusBarH + 'px'}]">
+			<view class="flexbox" :style="[{'height': customBarH + 'px'}]">
+				<view class="left-button" @tap="goBack">
+					<image class="back-img" :src="'/static/img/common/back'+(titleColor==='#fff'?'-white':'')+'.png'"
+						mode="aspectFill"></image>
+				</view>
+				<view class="title-text sys-height-44" :style="[{'marginLeft':left +'px','color':titleColor}]">{{title}}</view>
+				<view class="right-button button" @click="rightClick">
+					<view class="right-data" v-if="rightShow">
+						<text class="rightName  sys-weight-600" :style="[{'color':titleColor}]"
+							v-if="rightType===1">{{rightText}}</text>
+						<slot name="right" v-else> </slot>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="box-title">
+			<view class="" :style="[{'height': (customBarH+statusBarH) + 'px', 'padding-top': statusBarH + 'px'}]">
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-  import tools from "@/service/tools";
-
-  export default {
-    name: "en-nav",
-    data() {
-      return {
-        statusBarH: 0,
-        customBarH: 0,
-        left: 35,
-        isXcx:false
-      }
-    },
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      leftShow: {
-        type: Boolean,
-        default: true
-      },
-      bgckgroundBox: {
-        type: String,
-        default: '#fff'
-      },
-
-      titleColor: {
-        type: String,
-        default: '#fff'
-      },
-
-      rightText: {
-        type: String,
-        default: ''
-      },
-      rightShow: {
-        type: Boolean,
-        default: false
-      },
-      rightType: {
-        default: 1
-      },
-    },
-    computed: {
-
-    },
-    watch: {
-      leftShow(e) {
-        if (e == true) {
-          this.left = 0
-        }
-      }
-    },
-    methods: {
-      rightClick() {
-        this.$emit('rightClick')
-      },
-      goBack() {
-        if(!this.leftShow){
-          return ;
-        }
-        // this.$emit('leftClick')
-        tools.leftClick()
-      }
-    },
-    created() {
-      uni.getSystemInfo({
-        success: (e) =>{
-          this.statusBarH = e.statusBarHeight + 10
-          let custom=0;
-          //#ifdef MP-WEIXIN
-          custom = wx.getMenuButtonBoundingClientRect()
-          this.customBarH = custom.height
-          //#endif
-          //#ifdef H5
-          this.customBarH = 30
-          this.left=0
-          //#endif
-          // #ifdef APP-PLUS
-          // this.customBarH = 34
-          this.left=0
-          //#endif
-          console.log('self.customBarH---------'+this.customBarH)
-          this.$emit('navHeight', this.customBarH+this.statusBarH)
-        }
-      })
-      //#ifdef MP-WEIXIN
-      this.isXcx=true
-      //#endif
-    }
-  }
+	import tools from "@/service/tools";
+
+	export default {
+		name: "en-nav",
+		data() {
+			return {
+				statusBarH: 0,
+				customBarH: 0,
+				left: 35,
+				isXcx: false
+			}
+		},
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			leftShow: {
+				type: Boolean,
+				default: true
+			},
+			bgckgroundBox: {
+				type: String,
+				default: '#fff'
+			},
+
+			titleColor: {
+				type: String,
+				default: '#fff'
+			},
+
+			rightText: {
+				type: String,
+				default: ''
+			},
+			rightShow: {
+				type: Boolean,
+				default: false
+			},
+			rightType: {
+				default: 1
+			},
+			isT:{
+				default: 'background'
+			}
+		},
+		computed: {
+
+		},
+		watch: {
+			leftShow(e) {
+				if (e == true) {
+					this.left = 0
+				}
+			}
+		},
+		methods: {
+			rightClick() {
+				this.$emit('rightClick')
+			},
+			goBack() {
+				if (!this.leftShow) {
+					return;
+				}
+				// this.$emit('leftClick')
+				tools.leftClick()
+			}
+		},
+		created() {
+			uni.getSystemInfo({
+				success: (e) => {
+					this.statusBarH = e.statusBarHeight + 10
+					let custom = 0;
+					//#ifdef MP-WEIXIN
+					custom = wx.getMenuButtonBoundingClientRect()
+					this.customBarH = custom.height
+					//#endif
+					//#ifdef H5
+					this.customBarH = 30
+					this.left = 0
+					//#endif
+					// #ifdef APP-PLUS
+					// this.customBarH = 34
+					this.left = 0
+					//#endif
+					console.log('self.customBarH---------' + this.customBarH)
+					this.$emit('navHeight', this.customBarH + this.statusBarH)
+				}
+			})
+			//#ifdef MP-WEIXIN
+			this.isXcx = true
+			//#endif
+		}
+	}
 </script>
 
 <style scoped lang="scss">
-@import url("../../../static/css/en-common.css") ;
-
-  .header {
-    width: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 99999;
-    .flexbox {
-      display: flex;
-      justify-content: space-between;
-	  align-items: center;
-      padding: 0 12px;
-	  position: relative;
-	  
-      .left-button{
-		 position: absolute;
-		 left: 16rpx;
-		 top: 10rpx;
-        .back-img{
-          width: 40rpx;
-          height: 40rpx;
-        }
-      }
-      .iconfont{
-        color: #333333;
-      }
-      .title-text {
-		  width: 100%;
-		  text-align: center;
-        font-size: 36rpx;
-        font-weight: 600;
-      }
-      .icon-left {
-        width: 20px;
-        height: 20px;
-      }
-
-      .button {
-        position: absolute;
-		right: 16rpx;
-        // z-index: 5;
-        // width: 21px;
-        .rightName {
-          font-size: 32rpx;
-        }
-        .r-but{
-
-          color: #fff;
-          font-size: 12px;
-          padding: 5px;
-          border-radius: 3px;
-        }
-      }
-    }
-    .flexbox-xcx{
-      justify-content:left;
-      position: relative;
-      .right-button{
-        position: absolute;
-        right: 220rpx;
-      }
-    }
-
-  }
-
-
-  .box-title {
-    //background-color:#FF0000 ;
-  }
-
-
-</style>
+	@import url("../../../static/css/en-common.css");
+
+	.header {
+		width: 100%;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 99999;
+
+		.flexbox {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 12px;
+			position: relative;
+
+			.left-button {
+				position: absolute;
+				left: 16rpx;
+				top: 10rpx;
+
+				.back-img {
+					width: 40rpx;
+					height: 40rpx;
+				}
+			}
+
+			.iconfont {
+				color: #333333;
+			}
+
+			.title-text {
+				width: 100%;
+				text-align: center;
+				font-size: 36rpx;
+				font-weight: 600;
+			}
+
+			.icon-left {
+				width: 20px;
+				height: 20px;
+			}
+
+			.button {
+				position: absolute;
+				right: 16rpx;
+
+				// z-index: 5;
+				// width: 21px;
+				.rightName {
+					font-size: 32rpx;
+				}
+
+				.r-but {
+
+					color: #fff;
+					font-size: 12px;
+					padding: 5px;
+					border-radius: 3px;
+				}
+			}
+		}
+
+		.flexbox-xcx {
+			justify-content: left;
+			position: relative;
+
+			.right-button {
+				position: absolute;
+				right: 220rpx;
+			}
+		}
+
+	}
+
+
+	.box-title {
+		//background-color:#FF0000 ;
+	}
+</style>

components/jxs-slider/jxs-slider.vue

@@ -0,0 +1,406 @@
+<template>
+  <view class="cj-slider" @mousemove="onSliMouseMove" @mouseup="onSliMouseUp">
+    <!-- <view class="mouse-move" :style="{height: moveHeight + 'rpx'}"></view> -->
+    <view class="cj-slider__line" :class="[disabled ? 'cj-slider--disabled' : '']" :style="{
+		backgroundColor: inactiveColor,
+    height: height + 'rpx'
+	}" @click="onClick"></view>
+    <view class="cj-slider__gap" :style="[
+				barStyle,
+				{
+					height: height + 'rpx',
+					backgroundColor: activeColor
+				}
+			]" @click="onClick">
+      <view class="cj-slider__button-wrap" @mousedown="onMouseDown(1, $event)" @mousemove="onMouseMove($event)"
+        @mouseleave="onMouseLeave(1)" @mouseup="onMouseUp(1)" @touchstart="onTouchStart(1, $event)"
+        @touchmove="onTouchMove(1, $event)" @touchend="onTouchEnd(1)" @touchcancel="onTouchEnd">
+        <slot v-if="$slots.default  || $slots.$default" />
+        <view v-else class="cj-slider__button" :style="[blockStyle, {
+					height: blockWidth + 'rpx',
+					width: blockWidth + 'rpx',
+					backgroundColor: blockColor
+				}]">
+				<!-- <text class="numsize">{{value[0]}}</text> -->
+				</view>
+      </view>
+      <view class="cj-slider__button-wrap2" @mousedown="onMouseDown(2, $event)" @mousemove="onMouseMove($event)"
+        @mouseleave="onMouseLeave(2)" @mouseup="onMouseUp(2)" @touchstart="onTouchStart(2, $event)"
+        @touchmove="onTouchMove(2, $event)" @touchend="onTouchEnd(2)" @touchcancel="onTouchEnd">
+        <slot v-if="$slots.default  || $slots.$default" />
+        <view v-else class="cj-slider__button" :style="[blockStyle, {
+      				height: blockWidth + 'rpx',
+      				width: blockWidth + 'rpx',
+      				backgroundColor: blockColor
+      			}]">
+				<!-- <text class="numsize">{{value[1]}}</text> -->
+				</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * slider 滑块选择器
+   * @property {Number | String} value 滑块默认值（默认[最小值,最大值]）
+   * @property {Number | String} min 最小值（默认0）
+   * @property {Number | String} max 最大值（默认100）
+   * @property {Number | String} step 步长（默认1）
+   * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
+   * @property {Number | String} height 滑块条高度，单位rpx（默认6）
+   * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+   * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+   * @property {String} blockColor 滑块颜色（默认#ffffff）
+   * @property {Object} blockStyle 给滑块自定义样式，对象形式
+   * @property {Boolean} disabled 是否禁用滑块(默认为false)
+   * @property {Number | String} moveHeight 鼠标离开滑块仍可滑动的区域高度，单位rpx(默认100)
+   * @event {Function} start 滑动触发
+   * @event {Function} moving 正在滑动中
+   * @event {Function} end 滑动结束
+   * @example <cj-slider v-model="value" />
+   */
+  export default {
+    name: 'cj-slider',
+    props: {
+      // 当前进度百分比值
+      value: {
+        type: Array,
+        default(){
+			return []
+		}
+      },
+      // 是否禁用滑块
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 滑块宽度，高等于宽，单位rpx
+      blockWidth: {
+        type: [Number, String],
+        default: 30
+      },
+      // 最小值
+      min: {
+        type: [Number, String],
+        default: 0
+      },
+      // 最大值
+      max: {
+        type: [Number, String],
+        default: 100
+      },
+      // 步进值
+      step: {
+        type: [Number, String],
+        default: 1
+      },
+      // 滑块条高度，单位rpx
+      height: {
+        type: [Number, String],
+        default: 6
+      },
+      // 进度条的激活部分颜色
+      activeColor: {
+        type: String,
+        default: '#f17474'
+      },
+      // 进度条的背景颜色
+      inactiveColor: {
+        type: String,
+        default: '#c0c4cc'
+      },
+      // 滑块的背景颜色
+      blockColor: {
+        type: String,
+        default: '#ffffff'
+      },
+      // 用户对滑块的自定义颜色
+      blockStyle: {
+        type: Object,
+        default () {
+          return {};
+        }
+      },
+      // 鼠标可离开滑块后仍能滑动的范围高度
+      moveHeight: {
+        type: [Number, String],
+        default: '500'
+      }
+    },
+    data() {
+      return {
+        mouseLeave: false, // 鼠标移出了滑块
+        mouseType: 1, // 1 左滑块 2 右滑块
+        mouseDown: false, // 鼠标按下
+        startX: 0,
+        status: 'end',
+        newValue: 0,
+        distanceX: 0,
+        startValue: 0,
+        barStyle: {},
+        sliderRect: {
+          left: 0,
+          width: 0
+        }
+      };
+    },
+    created() {
+      // 如果不是长度为2的数组,默认值为[最小值, 最大值]
+      if (Object.prototype.toString.call(this.value) == '[object Array]' && this.value.length === 2) {
+        this.updateValue(this.value[0], this.value[1], false);
+      } else {
+        this.$emit('input', Array(this.min, this.max))
+      }
+    },
+    mounted() {
+      // 获取滑块条的尺寸信息
+      this.$uGetRect('.cj-slider').then(rect => {
+        this.sliderRect = rect;
+      });
+    },
+    methods: {
+      onTouchStart(type, event) {
+        if (this.disabled) return;
+        this.startX = 0;
+        // 触摸点集
+        let touches = event.touches[0];
+        // 触摸点到屏幕左边的距离
+        this.startX = touches.clientX;
+        // 此处的this.value虽为props值，但是通过$emit('input')进行了修改
+        this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
+        // 标示当前的状态为开始触摸滑动
+        this.status = 'start';
+      },
+      onMouseDown(type, event) {
+        if (this.disabled) return;
+        this.mouseDown = true;
+        this.mouseType = type
+        this.startX = event.clientX || 0;
+        this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
+        this.status = 'start';
+      },
+      onTouchMove(type, event) {
+        if (this.disabled) return;
+        // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+        // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+        if (this.status == 'start') this.$emit('start');
+        let touches = event.touches[0]
+        // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+        this.distanceX = touches.clientX - this.sliderRect.left
+        // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+        // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+        this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
+        this.status = 'moving'
+        // 发出moving事件
+        this.$emit('moving');
+        if (type === 1) {
+          this.updateValue(this.newValue, this.format(this.value[1]), true);
+        } else {
+          this.updateValue(this.format(this.value[0]), this.newValue, true);
+        }
+      },
+      onMouseMove(event) {
+        if (!this.mouseDown) return;
+        if (this.disabled) return;
+        if (this.status == 'start') this.$emit('start');
+        // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+        this.distanceX = event.clientX - this.sliderRect.left
+        // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+        // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+        this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
+        this.status = 'moving'
+        // 发出moving事件
+        this.$emit('moving');
+        if (this.mouseType === 1) {
+          this.updateValue(this.newValue, this.format(this.value[1]), true);
+        } else {
+          this.updateValue(this.format(this.value[0]), this.newValue, true);
+        }
+      },
+      onMouseLeave(type) {
+        this.mouseLeave = true
+      },
+      onTouchEnd(type) {
+        if (this.disabled) return;
+        if (this.status === 'moving') {
+          if (type === 1) {
+            this.updateValue(this.newValue, this.format(this.value[1]), true);
+          } else {
+            this.updateValue(this.format(this.value[0]), this.newValue, true);
+          }
+          this.$emit('end');
+        }
+        this.status = 'end';
+      },
+      onMouseUp(type) {
+        this.mouseDown = false;
+        this.mouseLeave = false;
+        if (this.disabled) return;
+        if (this.status === 'moving') {
+          if (type === 1) {
+            this.updateValue(this.newValue, this.format(this.value[1]), true);
+          } else {
+            this.updateValue(this.format(this.value[0]), this.newValue, true);
+          }
+          this.$emit('end');
+        }
+        this.status = 'end';
+      },
+      onSliMouseUp() {
+        // 鼠标在滑块范围内松开
+        this.mouseDown = false;
+        this.mouseLeave = false;
+      },
+      onSliMouseMove(e) {
+        // 监听整个滑动内的鼠标移动，因为PC端只能监听到小滑块内的移动，移动过快鼠标移出了小滑块则移动失败。
+        if (!this.mouseDown) return;
+        if (!this.mouseLeave) return;
+        this.onMouseMove(e)
+      },
+      updateValue(value, value2, drag) {
+        // 去掉小数部分，同时也是对step步进的处理
+        const widthB1 = this.format(value)
+        const widthB2 = this.format(value2)
+        const widthB1B = Math.round((widthB1 - this.min) * 100 / (this.max - this.min))
+        const widthB2B = Math.round((widthB2 - this.min) * 100 / (this.max - this.min))
+        // 不允许滑动的值超过max最大值，百分比也不能超过100
+        if (widthB1 > widthB2 || widthB2 > this.max || widthB2B > 100) return;
+        // 设置移动的百分比值
+        let barStyle = {
+          width: widthB2B - widthB1B + '%',
+          left: widthB1B + '%',
+        };
+        // 移动期间无需过渡动画
+        if (drag == true) {
+          barStyle.transition = 'none';
+        } else {
+          // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+          delete barStyle.transition;
+        }
+        // 修改value值，这里使用change改变，使用input H5桌面端会卡死，
+        this.$emit('input', Array(widthB1, widthB2));
+        this.barStyle = barStyle;
+      },
+      format(value) {
+        // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+        return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
+      },
+      onClick(event) {
+        if (this.disabled) return;
+        // 直接点击滑块的情况，计算方式与onTouchMove方法相同
+        const widthB1 = this.value[0]
+        const widthB2 = this.value[1]
+        const value = this.format(((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this
+            .min) +
+          this.min);
+        if (value < widthB1 || (value - widthB1) <= (widthB2 - value)) {
+          // 点击位置在左滑块的左边 || 点击位置在中间，且靠近左滑块 => 移动左滑块到该位置
+          this.updateValue(value, widthB2, false)
+        } else {
+          // 点击位置在右滑块的右边 || 点击位置在中间，且靠近右滑块 => 移动右滑块到该位置
+          this.updateValue(widthB1, value, false)
+        }
+      },
+      $uGetRect(selector, all) {
+        // $uGetRect为uView自带的节点查询简化方法
+        return new Promise(resolve => {
+          uni.createSelectorQuery().
+          in(this)[all ? 'selectAll' : 'select'](selector)
+            .boundingClientRect(rect => {
+              if (all && Array.isArray(rect) && rect.length) {
+                resolve(rect)
+              }
+              if (!all && rect) {
+                resolve(rect)
+              }
+            })
+            .exec()
+        })
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .cj-slider {
+    position: relative;
+    // background-color: #ebedf0;
+
+    &__line {
+      position: absolute;
+      width: 100%;
+      background-color: #ebedf0;
+    }
+
+    &__gap {
+      position: relative;
+      // 动画有bug，暂时取消
+      // transition: width 0.2s;
+      background-color: #f17474;
+    }
+
+    &__button {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+      background-color: #fff;
+      cursor: pointer;
+	  position: relative;
+	  .numsize{
+		  position: absolute;
+		  width: 60rpx;
+		  height: 40rpx;
+		  background-color: #f17474;
+		  color: #fff;
+		  top:-50rpx;
+		  left:50%;
+		  margin-left: -30rpx;
+		  display: flex;
+		  justify-content: center;
+		  align-items: center;
+		  border-radius: 10rpx;
+		  &::after{
+			 content: ' ';   
+			 position: absolute;   
+			 width: 0;   
+			 height: 0;   
+			 left: 22rpx;   
+			 top: 36rpx;   
+			 // border: 5rpx solid;   
+			 // border-color: #f17474 transparent transparent #f17474;
+			 
+			 border: 10rpx solid transparent;
+			 border-top-color: #f17474;
+		  }
+	  }
+    }
+
+    &__button-wrap {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate3d(-50%, -50%, 0);
+    }
+
+    &__button-wrap2 {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate3d(50%, -50%, 0);
+    }
+  }
+
+  .cj-slider--disabled {
+    opacity: 0.5;
+  }
+
+  .mouse-move {
+    position: fixed;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+</style>

pages.json

@@ -119,6 +119,13 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/index/model/user-info",
+			"style": {
+				"navigationBarTitleText": "个人主页",
+				"enablePullDownRefresh": false
+			}
+		},
 		{
 			"path": "pages/perfect/sexAndAge",
 			"style": {

pages/index/model/screen-item.vue

@@ -19,8 +19,8 @@
 				<view class="age-name sys-size-32 sys-color-white">
 					年龄 {{`${age[0]} - ${age[1]}`}}
 				</view>
-				<cjSlider :value="age" min="0" max="35" blockWidth="18" blockColor="#FFC107" activeColor="#727272"
-					inactiveColor="#727272" @moving="blockMoving"></cjSlider>
+				<cjSliderTwo v-model="age" :min="0" :max="35" :step="1" :blockWidth="18" @moving="blockMoving"
+					activeColor="#727272" inactiveColor="#727272" blockColor="#FFC107" />
 				<view class="num-section sys-size-28 sys-color-5B">
 					<view class="">
 						okm
@@ -31,7 +31,7 @@
 				</view>
 				<view class="sex">
 					<view v-for="(item,index) in sex" :key="index" class="sex-list sys-size-28 sys-radius-12"
-						@click="selsectSex(0)"
+						@click="selsectSex(item.id)"
 						:class="sexId == item.id?'sys-background-FFC107 sys-color-black':'sys-color-gray-646464 sys-background-222'">
 						{{item.name}}
 					</view>
@@ -85,11 +85,14 @@
 </template>
 
 <script>
+	import cjSliderTwo from '@/components/jxs-slider/jxs-slider.vue'
 	import cjSlider from '@/components/cj-slider/cj-slider.vue'
-  import {getFilter} from "@/api/discovery";
+	import {
+		getFilter
+	} from "@/api/discovery";
 	export default {
 		components: {
-			cjSlider,
+			cjSliderTwo
 		},
 		data() {
 			return {
@@ -109,27 +112,27 @@
 			};
 		},
 		mounted() {
-      this.getFilter()
-    },
-    methods: {
-      getFilter(){
-        getFilter().then((res)=>{
-          console.log(res)
-        })
-      },
-      scroll() {},
-      scrolltolower() {},
-      blockMoving(e) {
-        console.log('正在滑动中', e)
-      },
-      sliderChange(e) {
-        this.distance = e.detail.value
-      },
-      selsectSex(id) {
-        //点击没反应
-        this.sexId = id
-        console.log(id);
-      },
+			this.getFilter()
+		},
+		methods: {
+			getFilter() {
+				getFilter().then((res) => {
+					console.log(res)
+				})
+			},
+			scroll() {},
+			scrolltolower() {},
+			blockMoving(e) {
+				console.log('正在滑动中', e)
+			},
+			sliderChange(e) {
+				this.distance = e.detail.value
+			},
+			selsectSex(id) {
+				//点击没反应
+				this.sexId = id
+				console.log(id);
+			},
 		},
 	}
 </script>
@@ -228,6 +231,7 @@
 						display: flex;
 						align-items: center;
 						flex-wrap: wrap;
+
 						.list-box {
 							width: 25%;
 							display: flex;
@@ -256,4 +260,4 @@
 			}
 		}
 	}
-</style>
+</style>

pages/index/model/user-content.vue

@@ -33,12 +33,9 @@
           <view class="gift-but sys-background-yellow sys-color-black sys-weight-500" v-else>点亮</view>
         </view>
       </view>
-
     </view>
-
     <view class="dynamic-list">
       <dynamic-item :user-id="userItem.userId"></dynamic-item>
-
     </view>
 
   </view>

pages/index/model/user-info.vue

@@ -0,0 +1,547 @@
+<template>
+	<view class="user-info flex-common-css">
+		<Nav class="nav-class" :bgckgroundBox="!isScroll?'transparent':'#fff'" :titleColor="isScroll?'#000':'#fff'">
+		</Nav>
+		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
+			<view class="swiper-box">
+				<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="true" :current="currentIndex">
+					<swiper-item v-for="(item,index) in swiperData" :key="index">
+						<image class="swiper-img" :src="item.img" mode=""></image>
+					</swiper-item>
+				</swiper>
+				<scroll-view class="" scroll-x="true" scroll-left="120" :class="!isScroll?'scroll-view_H':'scroll-view_H-two'">
+					<image class="swiper-img-two sys-radius-16" v-for="(itemTwo,indexTwo) in swiperData" :key="indexTwo"
+						:src="itemTwo.img" mode="" @click="selectImg(indexTwo)"></image>
+				</scroll-view>
+				<view class="blank-box sys-background-gray-f"></view>
+			</view>
+			<view class="content-box sys-background-gray-f">
+				<view class="info-title">
+					<view class="info-title-name sys-weight-600 sys-size-40 sys-color-black">
+						最佳损友最佳损友最佳友最佳友最佳友最佳
+					</view>
+					<view class="like-but sys-background-F2F2F2 sys-radius-40">
+						<uni-icons type="heart-filled" size="12" color="#FB4454"></uni-icons>
+						<view class="like-but-text sys-size-24 sys-color-gray-6">
+							108喜欢
+						</view>
+					</view>
+				</view>
+				<view class="tag-box">
+					<view class="tag-list sys-background-F2F2F2 sys-radius-8">
+						<uni-icons type="checkbox-filled" size="12" color="#FB4454"></uni-icons>
+						<view class="tag-text sys-size-24 sys-color-gray-6">
+							真实头像
+						</view>
+					</view>
+				</view>
+				<view class="introduce">
+					<view class="distance sys-color-F47D12 sys-size-28 sys-weight-600">
+						17.16km
+					</view>
+					<view class="info-introduce sys-size-24 sys-color-gray-6">
+						重庆市 九龙坡 / 男/ 19岁
+					</view>
+				</view>
+				<view class="hobby-box">
+					<view class="hobby sys-radius-20">
+						<view class="hobby-title sys-size-32 sys-color-black">
+							崇尚自由，热爱生活，足以!
+						</view>
+						<view class="hobby-list">
+							<view class="hobby-tag sys-radius-200" v-for="(itemThree,indexThree) in hobbyList" :key="indexThree">
+								<uni-icons class="hobby-tag-icon" :type="itemThree.icon" size="24" color="#000000"></uni-icons>
+								<view class="hobby-tag-name sys-size-28 sys-color-gray-6">
+									{{itemThree.name}}
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="hello-box">
+				<view class="hello-box-left sys-radius-16 sys-color-white sys-weight-600 sys-size-32"
+					:class="listStyle==0?'sys-background-black':'sys-background-BF'">
+					{{listStyle==0?'喜欢':'以喜欢'}}
+				</view>
+				<view class="hello-box-left hello-box-right sys-radius-16 sys-background-black">
+					<uni-icons type="checkbox-filled" size="19" color="pink"></uni-icons>
+					<view class="sys-color-white sys-weight-600 sys-size-32">
+						打招呼
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				isScroll: false,
+				currentIndex: 0,
+				listStyle: 0,
+				swiperData: [{
+					'img': '/static/img/temporary/1.png',
+				}, {
+					'img': '/static/img/login/2.jpg',
+				}, {
+					'img': '/static/img/temporary/1.png',
+				}, {
+					'img': '/static/img/login/2.jpg',
+				}, {
+					'img': '/static/img/temporary/1.png',
+				}, {
+					'img': '/static/img/login/2.jpg',
+				}, {
+					'img': '/static/img/temporary/1.png',
+				}, {
+					'img': '/static/img/login/2.jpg',
+				}, {
+					'img': '/static/img/temporary/1.png',
+				}, {
+					'img': '/static/img/login/2.jpg',
+				}],
+				hobbyList: [{
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'chatbubble',
+					'name': '音乐'
+				}, {
+					'icon': 'headphones',
+					'name': '电影'
+				}, {
+					'icon': 'cart',
+					'name': '购物'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, {
+					'icon': 'checkbox-filled',
+					'name': '认识朋友'
+				}, {
+					'icon': 'color',
+					'name': '重庆科创职业学院'
+				}, ]
+			};
+		},
+		mounted() {},
+		methods: {
+			scroll(e) {
+				if (e.detail.scrollTop > 250) {
+					this.isScroll = true
+				} else {
+					this.isScroll = false
+				}
+			},
+			scrolltolower() {
+				console.log('触底');
+			},
+			selectImg(index) {
+				this.currentIndex = index
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.user-info {
+		.nav-class {
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+
+		.list-scroll {
+			width: 100%;
+			flex: 1;
+			overflow: auto;
+			padding: 0 0 118rpx 0;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+
+			.swiper-box {
+				width: 100%;
+				height: 960rpx;
+				position: relative;
+
+				.swiper {
+					width: 100%;
+					height: 100%;
+
+					.swiper-img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.scroll-view_H {
+					white-space: nowrap;
+					width: 100%;
+					padding: 0 38rpx 0 0;
+					position: absolute;
+					left: 40rpx;
+					bottom: 58rpx;
+					box-sizing: border-box;
+					opacity: 1;
+					transition: opacity 500ms ease-out;
+
+					.swiper-img-two {
+						width: 100rpx;
+						height: 100rpx;
+						border: 2rpx solid #FAFAFA;
+						margin: 0 12rpx 0 0;
+					}
+				}
+
+				.scroll-view_H-two {
+					white-space: nowrap;
+					width: 100%;
+					padding: 0 38rpx 0 0;
+					position: absolute;
+					left: 40rpx;
+					bottom: 58rpx;
+					box-sizing: border-box;
+					opacity: 0;
+					transition: opacity 500ms ease-out;
+
+					.swiper-img-two {
+						width: 100rpx;
+						height: 100rpx;
+						border: 2rpx solid #FAFAFA;
+						margin: 0 12rpx 0 0;
+					}
+				}
+
+				.blank-box {
+					width: 100%;
+					height: 34rpx;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					border-radius: 40rpx 40rpx 0 0;
+				}
+			}
+
+			.content-box {
+				width: 100%;
+				height: auto;
+				padding: 0 32rpx;
+				box-sizing: border-box;
+
+				.info-title {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin: 0 0 16rpx 0;
+
+					.info-title-name {
+						width: 434rpx;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						word-break: break-all;
+					}
+
+					.like-but {
+						display: flex;
+						align-items: center;
+						padding: 7rpx 20rpx;
+
+						.like-but-text {
+							margin: 0 0 0 6rpx;
+						}
+					}
+				}
+
+				.tag-box {
+					display: flex;
+					align-items: center;
+					flex-wrap: wrap;
+					margin: 0 0 16rpx 0;
+
+					.tag-list {
+						display: flex;
+						align-items: center;
+						padding: 7rpx 10rpx;
+					}
+
+					.tag-text {
+						margin: 0 0 0 12rpx;
+					}
+				}
+
+				.introduce {
+					display: flex;
+					align-items: center;
+					margin: 0 0 36rpx 0;
+
+					.distance {
+						margin: 0 16rpx 0 0;
+					}
+				}
+
+				.hobby-box {
+					width: 100%;
+					height: auto;
+					padding: 0 0 12rpx 0;
+					border-bottom: 2rpx solid #F9F9F9;
+
+					.hobby {
+						width: 100%;
+						height: auto;
+						padding: 36rpx 25rpx;
+						box-sizing: border-box;
+						background: linear-gradient(180deg, rgba(246, 246, 246, 0.75) 0%, #FFFFFF 100%);
+
+						.hobby-title {
+							margin: 0 0 36rpx 0;
+						}
+
+						.hobby-list {
+							display: flex;
+							align-items: center;
+							flex-wrap: wrap;
+
+							.hobby-tag {
+								display: flex;
+								align-items: center;
+								padding: 6rpx 24rpx;
+								border: 1rpx solid #E0E0E0;
+								margin: 0 20rpx 20rpx 0;
+
+								.hobby-tag-icon {
+									margin: 0 8rpx 0 0;
+								}
+
+								.hobby-tag-name {}
+							}
+						}
+					}
+				}
+			}
+
+			.hello-box {
+				width: 100%;
+				height: auto;
+				padding: 18rpx 0 12rpx;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: fixed;
+				left: 0;
+				bottom: 0;
+
+				.hello-box-left {
+					width: 332rpx;
+					padding: 22rpx 0;
+					text-align: center;
+				}
+
+				.hello-box-right {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin: 0 0 0 22rpx;
+				}
+			}
+		}
+	}
+</style>

static/css/sys.css

@@ -120,6 +120,9 @@
 .sys-color-FE6915{
   color: #FE6915;
 }
+.sys-color-F47D12{
+  color: #F47D12;
+}
 .sys-color-4BC285{
   color: #4BC285;
 }
@@ -178,6 +181,10 @@
 .sys-background-F2F2F2{
   background-color: #F2F2F2;
 }
+.sys-background-BF{
+  background-color: #BFBFBF;
+}
+
 .sys-background-222{
   background-color: #222222;
 }