flat: 页面初始化
This commit is contained in:
史典卓
7
App.vue
7
App.vue
@@ -5,7 +5,12 @@ const userStore = useUserStore();
|
||||
onLaunch(() => {
|
||||
console.log('App Launch');
|
||||
let openId = uni.getStorageSync('openId') || ''; // 同步获取 缓存信息
|
||||
|
||||
uni.onTabBarMidButtonTap(() => {
|
||||
console.log(123);
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login',
|
||||
});
|
||||
});
|
||||
if (openId) {
|
||||
console.log('有openid');
|
||||
} else {
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
/* 公共样式表 */
|
||||
page {
|
||||
height: 100%;
|
||||
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
font-size: 28rpx;
|
||||
background-color: #f4f4f4;
|
||||
/* line-height: 1.8; */
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -178,67 +176,71 @@ html {
|
||||
|
||||
/* 控制左右距离 */
|
||||
.mar_le30 {
|
||||
margin-left: 60rpx;
|
||||
margin-left: 60rpx !important;
|
||||
}
|
||||
|
||||
.mar_le25 {
|
||||
margin-left: 50rpx;
|
||||
margin-left: 50rpx !important;
|
||||
}
|
||||
|
||||
.mar_le20 {
|
||||
margin-left: 40rpx;
|
||||
margin-left: 40rpx !important;
|
||||
}
|
||||
|
||||
.mar_le15 {
|
||||
margin-left: 30rpx;
|
||||
margin-left: 30rpx !important;
|
||||
}
|
||||
|
||||
.mar_le10 {
|
||||
margin-left: 20rpx;
|
||||
margin-left: 20rpx !important;
|
||||
}
|
||||
|
||||
.mar_le5 {
|
||||
margin-left: 10rpx;
|
||||
margin-left: 10rpx !important;
|
||||
}
|
||||
|
||||
.mar_ri5 {
|
||||
margin-right: 10rpx;
|
||||
margin-right: 10rpx !important;
|
||||
}
|
||||
|
||||
.mar_ri10 {
|
||||
margin-right: 20rpx;
|
||||
margin-right: 20rpx !important;
|
||||
}
|
||||
|
||||
.mar_ri15 {
|
||||
margin-right: 30rpx;
|
||||
margin-right: 30rpx !important;
|
||||
}
|
||||
|
||||
.mar_ri20 {
|
||||
margin-right: 40rpx;
|
||||
margin-right: 40rpx !important;
|
||||
}
|
||||
|
||||
.mar_ri25 {
|
||||
margin-right: 50rpx;
|
||||
margin-right: 50rpx !important;
|
||||
}
|
||||
|
||||
.mar_top0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.mar_top5 {
|
||||
margin-top: 10rpx;
|
||||
margin-top: 10rpx !important;
|
||||
}
|
||||
|
||||
.mar_top10 {
|
||||
margin-top: 20rpx;
|
||||
margin-top: 20rpx !important;
|
||||
}
|
||||
|
||||
.mar_top15 {
|
||||
margin-top: 30rpx;
|
||||
margin-top: 30rpx !important;
|
||||
}
|
||||
|
||||
.mar_top20 {
|
||||
margin-top: 40rpx;
|
||||
margin-top: 40rpx !important;
|
||||
}
|
||||
|
||||
.mar_top25 {
|
||||
margin-top: 50rpx;
|
||||
margin-top: 50rpx !important;
|
||||
}
|
||||
|
||||
/* 控制字体粗细 */
|
||||
@@ -307,3 +309,20 @@ html {
|
||||
.fl_alend {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.fl_1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.line_2 {
|
||||
display: -webkit-box;
|
||||
/* 让文本内容成为弹性盒 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 设置盒子的方向为垂直 */
|
||||
-webkit-line-clamp: 2;
|
||||
/* 限制最多显示两行 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出的文本 */
|
||||
text-overflow: ellipsis;
|
||||
/* 使用省略号 */
|
||||
}
|
||||
BIN
components/.DS_Store
vendored
Normal file
BIN
components/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
components/bing-progress.zip
Normal file
BIN
components/bing-progress.zip
Normal file
Binary file not shown.
67
components/bing-progress/bing-progress.css
Normal file
67
components/bing-progress/bing-progress.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.bing-progress {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.bp-marea {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: space-around;
|
||||
background-color: rgba(0,0,0,0);
|
||||
z-index: 6;
|
||||
}
|
||||
.bp-mview,
|
||||
.bp-handle {
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
}
|
||||
.bp-handle-text {
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
}
|
||||
.bp-bar_max {
|
||||
position: absolute;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bp-bar_active {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
.bp-bar_sub_active {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.bp-value {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
}
|
||||
.bp-handle-widget {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
868
components/bing-progress/bing-progress.vue
Normal file
868
components/bing-progress/bing-progress.vue
Normal file
@@ -0,0 +1,868 @@
|
||||
<template>
|
||||
<view class="bing-progress" :style="{width:bpWidth,height:bpHeight,borderRadius:borderRadius,
|
||||
backgroundColor:backgroundColor,flexDirection:direction!='vertical'?'row':'column'}">
|
||||
<!-- 进度 -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<div class="bp-bar_max"
|
||||
:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,
|
||||
flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft,borderRadius:barBorderRadius}">
|
||||
<div class="bp-bar_sub_active"
|
||||
:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
|
||||
top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
|
||||
<div class="bp-bar_active"
|
||||
:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
|
||||
top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
|
||||
</div>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="bp-bar_max"
|
||||
:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,borderRadius:barBorderRadius,
|
||||
flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft}">
|
||||
<view class="bp-bar_sub_active"
|
||||
:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
|
||||
top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
|
||||
<view class="bp-bar_active"
|
||||
:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
|
||||
top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<movable-area id="bp-marea" class="bp-marea" @touchmove.stop.prevent="touchmove" @touchstart.stop.prevent="touchstart" @touchcancel="touchend" @touchend="touchend"
|
||||
:style="{width:mareaWidth,height:mareaHeight,left:mareaLeft}">
|
||||
<!-- 拖柄 -->
|
||||
<movable-view id="bp-mview" class="bp-mview" :direction="direction=='vertical'?'vertical':'horizontal'" :animation="false"
|
||||
:disabled="true" :x="handleX" :y="handleY" friction="10" damping="100"
|
||||
:style="{width:mhandleWidth,height:mhandleHeight,backgroundColor:handleColor,
|
||||
borderRadius:handleBorderRadius,fontSize:infoFontSize,top:mhandleTop}">
|
||||
<view id="bp-handle" class="bp-handle" :style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}">
|
||||
<image class="bp-handle-img" :src="handleImgUrl" v-if="handleImgUrl"
|
||||
:style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}"></image>
|
||||
<!-- 进度值 -->
|
||||
<text class="bp-handle-text" v-if="handleImgUrl=='' && infoAlign=='handle' && showInfo"
|
||||
:style="{fontSize:infoFontSize,color:infoColor,width:mhandleWidth,height:textHeight,borderRadius:'20px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
|
||||
<!-- 挂件 -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<!-- 图片挂件 -->
|
||||
<image v-if="widgetPos=='top' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius, bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
||||
<image v-if="widgetPos=='right' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
||||
<image v-if="widgetPos=='bottom' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
||||
<image v-if="widgetPos=='left' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
|
||||
<!-- 自定义元素挂件 -->
|
||||
<view v-if="widgetPos=='top' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
||||
<slot/>
|
||||
</view>
|
||||
<view v-if="widgetPos=='right' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
||||
<slot/>
|
||||
</view>
|
||||
<view v-if="widgetPos=='bottom' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
||||
<slot/>
|
||||
</view>
|
||||
<view v-if="widgetPos=='left' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
|
||||
<slot/>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
<!-- 进度值 -->
|
||||
<text class="bp-value" v-if="showValueState() || (infoAlign=='center'&&direction!='vertical' && showInfo)"
|
||||
:style="{color:infoColor,fontSize:infoFontSize,left:valueLeft,width:valueWidth()+'px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 进度条，副进度条
|
||||
*/
|
||||
export default {
|
||||
created() {
|
||||
/**
|
||||
* 获取系统屏幕信息，用于后续单位换算
|
||||
*/
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.px2rpx = 750 / systemInfo.screenWidth
|
||||
this.screenWidth = systemInfo.screenWidth
|
||||
this.screenHeight = systemInfo.screenHeight
|
||||
},
|
||||
mounted() {
|
||||
// #ifndef APP-NVUE
|
||||
/**
|
||||
* 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
|
||||
*/
|
||||
this.updateRect()
|
||||
// #endif
|
||||
this.mmax = this.valueFormat(this.max,false)
|
||||
this.percent = Math.abs((this.valueFormat(this.value) - this.min) / (this.mmax - this.min))
|
||||
this.subPercent = Math.abs((this.valueFormat(this.subValue,true) - this.min) / (this.mmax - this.min))
|
||||
if(this.reverse) {
|
||||
if(this.direction!='vertical') {
|
||||
this.handleX = (1 - this.percent) * this.barMaxLength
|
||||
}
|
||||
else {
|
||||
this.handleY = this.percent * this.barMaxLength
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(this.direction!='vertical') {
|
||||
this.handleX = this.percent * this.barMaxLength
|
||||
}
|
||||
else {
|
||||
this.handleY = (1 - this.percent) * this.barMaxLength
|
||||
}
|
||||
}
|
||||
if(this.bpname=='test') {
|
||||
console.log(this.mainInfo)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* sub表示副进度条属性
|
||||
*/
|
||||
props: {
|
||||
// 组件名字
|
||||
bpname: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: String,
|
||||
default: '30px'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,0)'
|
||||
},
|
||||
noActiveColor: {
|
||||
type: String,
|
||||
default: "#00ffff"
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: "#0000ff"
|
||||
},
|
||||
subActiveColor: {
|
||||
type: String,
|
||||
default: "#ffaaaa"
|
||||
},
|
||||
handleColor: {
|
||||
type: String,
|
||||
default: "#ffff00"
|
||||
},
|
||||
infoColor: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
},
|
||||
// 整个进度条的外边界圆角半径
|
||||
borderRadius: {
|
||||
type: String,
|
||||
default: '5px'
|
||||
},
|
||||
// 进度条内部滑轨圆角半径
|
||||
barBorderRadius: {
|
||||
type: String,
|
||||
default: '5px'
|
||||
},
|
||||
// active and subActive 是否显示圆角 NVUE默认true，其他默认false
|
||||
// #ifdef APP-NVUE
|
||||
isActiveCircular: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
isActiveCircular: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// #endif
|
||||
handleWidth: {
|
||||
type: String,
|
||||
default: '50px'
|
||||
},
|
||||
handleHeight: {
|
||||
type: String,
|
||||
default: '40px'
|
||||
},
|
||||
handleBorderRadius: {
|
||||
type: String,
|
||||
default: '5px'
|
||||
},
|
||||
handleImgUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
infoEndText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
infoFontSize: {
|
||||
type: String,
|
||||
default: '18px'
|
||||
},
|
||||
showInfo: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 进度值显示value还是subValue
|
||||
infoContent: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
// 进度值显示位置 left, right, center, handle
|
||||
infoAlign: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
subValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 副进度条步长
|
||||
subStep: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// true连续滑动，false步进，即以step的间隔变化
|
||||
continuous: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 副进度条continuous
|
||||
subContinuous: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 挂件位置 top, right, bottom, left
|
||||
widgetPos: {
|
||||
type: String,
|
||||
default: "top"
|
||||
},
|
||||
widgetHeight: {
|
||||
type: [String,Number],
|
||||
default: '40px'
|
||||
},
|
||||
widgetWidth: {
|
||||
type: [String,Number],
|
||||
default: '50px'
|
||||
},
|
||||
widgetBorderRadius: {
|
||||
type: [String,Number],
|
||||
default: '5px'
|
||||
},
|
||||
// 挂件不透明度 0完全透明 1不透明
|
||||
widgetOpacity: {
|
||||
type: [String,Number],
|
||||
default: 1
|
||||
},
|
||||
// 挂件距离组件的偏移量，正数原理组件，负数靠近组件
|
||||
widgetOffset: {
|
||||
type: [String,Number],
|
||||
default: '0px'
|
||||
},
|
||||
// 挂件图片
|
||||
widgetUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 挂件旋转角度
|
||||
widgetAngle: {
|
||||
type: [String,Number],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
handleX: 50,
|
||||
handleY: 0,
|
||||
px2rpx: 1,
|
||||
percent: 0, // 0-1
|
||||
subPercent: 0, // 0-1
|
||||
mainInfo: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
touchState: false,
|
||||
screenHeight: 0,
|
||||
screenWidth: 0,
|
||||
msubValue: 0,
|
||||
moveable: true,
|
||||
lastTouchTime: 0,
|
||||
mmax: 100
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* @param {Object} newValue
|
||||
* @param {Object} oldValue
|
||||
*/
|
||||
value(newValue, oldValue) {
|
||||
if(!this.touchState) {
|
||||
newValue = this.valueSetBoundary(newValue)
|
||||
this.percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
||||
}
|
||||
},
|
||||
showValue(newValue, oldValue) {
|
||||
// 步进
|
||||
if(!this.continuous) {
|
||||
let percent
|
||||
if(this.reverse) {
|
||||
if(this.direction!='vertical') {
|
||||
percent = Math.abs(1 - (newValue - this.min) / (this.mmax - this.min))
|
||||
this.handleX = percent * this.barMaxLength
|
||||
}
|
||||
else {
|
||||
percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
||||
this.handleY = percent * this.barMaxLength
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(this.direction!='vertical') {
|
||||
percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
||||
this.handleX = percent * this.barMaxLength
|
||||
}
|
||||
else {
|
||||
percent = (1 - Math.abs((newValue - this.min) / (this.mmax - this.min)))
|
||||
this.handleY = percent * this.barMaxLength
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
|
||||
this.$emit("valuechange", {bpname: this.bpname,type: 'valuechange',value:this.showValue,subValue:this.msubValue})
|
||||
},
|
||||
percent(newValue, oldValue) {
|
||||
// 连续
|
||||
if(this.continuous) {
|
||||
if(this.reverse) {
|
||||
if(this.direction!='vertical') {
|
||||
this.handleX = (1 - newValue) * this.barMaxLength
|
||||
}
|
||||
else {
|
||||
this.handleY = newValue * this.barMaxLength
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(this.direction!='vertical') {
|
||||
this.handleX = newValue * this.barMaxLength
|
||||
}
|
||||
else {
|
||||
this.handleY = (1 - newValue) * this.barMaxLength
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
subValue(newValue, oldValue) {
|
||||
newValue = this.valueSetBoundary(newValue)
|
||||
|
||||
if(this.subContinuous) {
|
||||
this.msubValue = newValue
|
||||
}
|
||||
else {
|
||||
this.msubValue = this.valueFormat(newValue, true)
|
||||
}
|
||||
this.subPercent = Math.abs((newValue - this.min) / (this.mmax - this.min))
|
||||
this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
|
||||
this.$emit("subvaluechange", {bpname: this.bpname,type: 'subvaluechange',value:this.showValue,subValue:this.msubValue})
|
||||
|
||||
},
|
||||
max(newValue,oldValue) {
|
||||
this.mmax = this.valueFormat(newValue,false)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bpWidth() {
|
||||
if(this.direction=="vertical") {
|
||||
return this.maxHeight()[2]
|
||||
}
|
||||
return this.sizeDeal(this.width)[2]
|
||||
},
|
||||
bpHeight() {
|
||||
if(this.direction=="vertical") {
|
||||
return this.sizeDeal(this.width)[2]
|
||||
}
|
||||
return this.maxHeight()[2]
|
||||
},
|
||||
mareaWidth() {
|
||||
if(this.direction=="vertical") {
|
||||
return this.maxHeight()[2]
|
||||
}
|
||||
let width = this.sizeDeal(this.width)[0]
|
||||
return (width - this.textWidth()) + 'px'
|
||||
},
|
||||
mareaHeight() {
|
||||
if(this.direction=="vertical") {
|
||||
let width = this.sizeDeal(this.width)[0]
|
||||
return (width - this.textWidth()) + 'px'
|
||||
}
|
||||
return this.maxHeight()[2]
|
||||
},
|
||||
mareaLeft() {
|
||||
if(this.showValueState()) {
|
||||
if(this.infoAlign == 'left') {
|
||||
return this.textWidth() + 'px'
|
||||
}
|
||||
}
|
||||
return 0
|
||||
},
|
||||
barMaxHeight() {
|
||||
if(this.direction=="vertical") {
|
||||
let width = this.sizeDeal(this.width)[0]
|
||||
let handleWidth = this.sizeDeal(this.handleWidth)
|
||||
return (width - this.textWidth() - handleWidth[0]) + 'px'
|
||||
}
|
||||
return this.sizeDeal(this.strokeWidth)[2]
|
||||
},
|
||||
barMaxWidth() {
|
||||
if(this.direction=="vertical") {
|
||||
return this.sizeDeal(this.strokeWidth)[2]
|
||||
}
|
||||
let width = this.sizeDeal(this.width)[0]
|
||||
let handleWidth = this.sizeDeal(this.handleWidth)
|
||||
return (width - this.textWidth() - handleWidth[0]) + 'px'
|
||||
},
|
||||
barMaxLeft() {
|
||||
if(this.showValueState()) {
|
||||
if(this.infoAlign == 'left') {
|
||||
return this.textWidth() + this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
|
||||
}
|
||||
}
|
||||
if(this.direction != 'vertical') {
|
||||
return this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
|
||||
}
|
||||
// vertical
|
||||
return (this.maxHeight()[0] - this.sizeDeal(this.strokeWidth)[0]) / 2 + 'px'
|
||||
|
||||
},
|
||||
activeRight() {
|
||||
if(this.reverse) {
|
||||
return 0
|
||||
}
|
||||
return 'unset'
|
||||
},
|
||||
activeLeft() {
|
||||
if(this.reverse) {
|
||||
return 'unset'
|
||||
}
|
||||
return 0
|
||||
},
|
||||
activeTop() {
|
||||
if(this.reverse) {
|
||||
return 0
|
||||
}
|
||||
return 'unset'
|
||||
},
|
||||
activeBottom() {
|
||||
if(this.reverse) {
|
||||
return 'unset'
|
||||
}
|
||||
return 0
|
||||
},
|
||||
barActiveWidth() {
|
||||
if(this.direction=="vertical") {
|
||||
return this.sizeDeal(this.strokeWidth)[2]
|
||||
}
|
||||
let percent
|
||||
if(this.continuous) {
|
||||
percent = this.percent
|
||||
}
|
||||
else {
|
||||
percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
|
||||
}
|
||||
return this.barMaxLength * percent + 'px'
|
||||
},
|
||||
barActiveHeight() {
|
||||
if(this.direction=="vertical") {
|
||||
let percent
|
||||
if(this.continuous) {
|
||||
percent = this.percent
|
||||
}
|
||||
else {
|
||||
percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
|
||||
}
|
||||
return this.barMaxLength * percent + 'px'
|
||||
}
|
||||
return this.sizeDeal(this.strokeWidth)[2]
|
||||
},
|
||||
subActiveTop() {
|
||||
if(this.reverse) {
|
||||
return 0
|
||||
}
|
||||
return 'unset'
|
||||
},
|
||||
subActiveBottom() {
|
||||
if(this.reverse) {
|
||||
return 'unset'
|
||||
}
|
||||
return 0
|
||||
},
|
||||
subActiveRight() {
|
||||
if(this.reverse) {
|
||||
return 0
|
||||
}
|
||||
return 'unset'
|
||||
},
|
||||
subActiveLeft() {
|
||||
if(this.reverse) {
|
||||
return 'unset'
|
||||
}
|
||||
return 0
|
||||
},
|
||||
barSubActiveWidth() {
|
||||
if(this.direction == "vertical") {
|
||||
return this.sizeDeal(this.strokeWidth)[2]
|
||||
}
|
||||
if(this.subContinuous) {
|
||||
return this.barMaxLength * this.subPercent + 'px'
|
||||
}
|
||||
else {
|
||||
return this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
|
||||
}
|
||||
|
||||
},
|
||||
barSubActiveHeight() {
|
||||
if(this.direction == "vertical") {
|
||||
if(this.subContinuous) {
|
||||
return this.barMaxLength * this.subPercent + 'px'
|
||||
}
|
||||
else {
|
||||
this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
|
||||
}
|
||||
|
||||
}
|
||||
return this.sizeDeal(this.strokeWidth)[2]
|
||||
},
|
||||
mhandleWidth() {
|
||||
if(this.direction == "vertical") {
|
||||
return this.sizeDeal(this.handleHeight)[2]
|
||||
}
|
||||
return this.sizeDeal(this.handleWidth)[2]
|
||||
},
|
||||
mhandleHeight() {
|
||||
if(this.direction == "vertical") {
|
||||
return this.sizeDeal(this.handleWidth)[2]
|
||||
}
|
||||
return this.sizeDeal(this.handleHeight)[2]
|
||||
},
|
||||
mhandleTop() {
|
||||
if(this.direction == 'vertical') {
|
||||
return 0
|
||||
}
|
||||
else {
|
||||
// 拖柄垂直居中
|
||||
let handle = this.sizeDeal(this.handleHeight)[0]
|
||||
let top = this.maxHeight()[0] / 2 - handle / 2 + 'px'
|
||||
return top
|
||||
}
|
||||
},
|
||||
showValue() {
|
||||
return this.valueFormat(this.percent * (this.mmax - this.min) + this.min)
|
||||
},
|
||||
textHeight() {
|
||||
let infoSize = this.sizeDeal(this.infoFontSize)
|
||||
return infoSize[0]*1.2 + infoSize[1]
|
||||
},
|
||||
valueLeft() {
|
||||
if(this.infoAlign=='left') {
|
||||
return 0
|
||||
}
|
||||
else if(this.infoAlign == 'center') {
|
||||
let width = this.sizeDeal(this.width)
|
||||
return width[0]/2 - this.valueWidth()/2 + 'px'
|
||||
}
|
||||
else if(this.infoAlign=='right'){
|
||||
let width = this.sizeDeal(this.width)
|
||||
return width[0] - this.textWidth() + 'px'
|
||||
}
|
||||
return 0
|
||||
},
|
||||
barMaxLength() {
|
||||
let width = this.sizeDeal(this.width)[0]
|
||||
let handleWidth = this.sizeDeal(this.handleWidth)
|
||||
return width - this.textWidth() - handleWidth[0]
|
||||
},
|
||||
mwidgetWidth() {
|
||||
return this.sizeDeal(this.widgetWidth)[2];
|
||||
},
|
||||
mwidgetHeight() {
|
||||
return this.sizeDeal(this.widgetHeight)[2];
|
||||
},
|
||||
moffset() {
|
||||
let off = this.sizeDeal(this.widgetOffset);
|
||||
// console.log(off)
|
||||
switch(this.widgetPos) {
|
||||
case 'top':
|
||||
return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
|
||||
case 'right':
|
||||
return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
|
||||
case 'bottom':
|
||||
return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
|
||||
case 'left':
|
||||
return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
|
||||
}
|
||||
return 0
|
||||
},
|
||||
mwidgetBorderRadius() {
|
||||
return this.sizeDeal(this.widgetBorderRadius)[2];
|
||||
},
|
||||
mwidgetAngle() {
|
||||
return "rotate("+Number(this.widgetAngle)+"deg)"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prevent(e) {
|
||||
console.log(1)
|
||||
},
|
||||
updateRect() {
|
||||
// #ifndef APP-NVUE
|
||||
/**
|
||||
* 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
|
||||
*/
|
||||
let query = uni.createSelectorQuery().in(this)
|
||||
query.select('.bing-progress').boundingClientRect(data => {
|
||||
this.mainInfo.top = data.top
|
||||
this.mainInfo.left = data.left
|
||||
this.mainInfo.bottom = data.bottom
|
||||
this.mainInfo.right = data.right
|
||||
}).exec()
|
||||
// #endif
|
||||
},
|
||||
touchstart(e) {
|
||||
if(!this.disabled) {
|
||||
// #ifdef APP-NVUE
|
||||
e.stopPropagation()
|
||||
e.target.attr.preventGesture = true
|
||||
if(this.direction == 'vertical' && e.target.attr.id != 'bp-mview' && (e.timestamp - this.lastTouchTime > 100)) {
|
||||
this.moveable = false
|
||||
}
|
||||
this.lastTouchTime = e.timestamp
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
/**
|
||||
* 防止组件在文档流中的位置被修改，导致组件进度值异常
|
||||
*/
|
||||
this.updateRect()
|
||||
// #endif
|
||||
// 阻止组件信息异常情况下的进度值修改
|
||||
if(this.mainInfo.top > this.screenHeight) {
|
||||
this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
|
||||
return
|
||||
}
|
||||
this.touchState = true
|
||||
let detail = e.changedTouches[0]
|
||||
this.handleMove(detail)
|
||||
this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
|
||||
}
|
||||
},
|
||||
touchmove(e) {
|
||||
if(!this.disabled) {
|
||||
let detail = e.changedTouches[0]
|
||||
this.handleMove(detail)
|
||||
this.$emit("dragging", {bpname: this.bpname,type: 'dragging',value:this.showValue,subValue:this.msubValue})
|
||||
}
|
||||
},
|
||||
touchend(e) {
|
||||
if(!this.disabled) {
|
||||
// #ifdef APP-NVUE
|
||||
if(!this.moveable) {
|
||||
this.moveable = true
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
let detail = e.changedTouches[0]
|
||||
this.handleMove(detail)
|
||||
this.touchState = false
|
||||
this.$emit("dragend", {bpname: this.bpname,type: 'dragend',value:this.showValue,subValue:this.msubValue})
|
||||
}
|
||||
},
|
||||
handleMove(detail) {
|
||||
let width = this.sizeDeal(this.width)[0]
|
||||
let handleWidth = this.sizeDeal(this.handleWidth)
|
||||
let percent
|
||||
if(this.direction!='vertical') {
|
||||
if(this.infoAlign=='left') {
|
||||
// #ifndef APP-NVUE
|
||||
percent = (detail.pageX - this.mainInfo.left - this.textWidth() - handleWidth[0]/2)/ this.barMaxLength
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
|
||||
// #endif
|
||||
}
|
||||
else {
|
||||
// #ifndef APP-NVUE
|
||||
percent = (detail.pageX - this.mainInfo.left - handleWidth[0]/2)/ this.barMaxLength
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
else {
|
||||
// #ifdef APP-NVUE
|
||||
percent = 1 - (detail.pageY - handleWidth[0]/2- 1) / this.barMaxLength
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
percent = 1 - (detail.clientY - this.mainInfo.top - handleWidth[0]/2)/ this.barMaxLength
|
||||
// #endif
|
||||
}
|
||||
percent = percent > 0 ? percent : 0
|
||||
percent = percent < 1 ? percent : 1
|
||||
if(this.reverse) {
|
||||
this.percent = 1 - percent
|
||||
}
|
||||
else {
|
||||
this.percent = percent
|
||||
}
|
||||
},
|
||||
showValueState() {
|
||||
if(this.direction != 'vertical' && this.showInfo && (this.infoAlign=='left' || this.infoAlign=='right')) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
valueSetBoundary(value) {
|
||||
// 控制value在合法范围内
|
||||
if(this.mmax > this.min) {
|
||||
value = value < this.mmax ? value : this.mmax
|
||||
value = value > this.min ? value : this.min
|
||||
}
|
||||
else {
|
||||
value = value > this.mmax ? value : this.mmax
|
||||
value = value < this.min ? value : this.min
|
||||
}
|
||||
return value
|
||||
},
|
||||
/**
|
||||
* @param {Object} v
|
||||
* @param {Object} isSub 是否是副副进度条
|
||||
*/
|
||||
valueFormat (v,isSub){
|
||||
// set step
|
||||
v = this.valueSetBoundary(v)
|
||||
let stepInfo = this.stepInfo(isSub)
|
||||
v = Number(v - this.min).toFixed(stepInfo[1])
|
||||
let step = stepInfo[0] * 10 ** stepInfo[1]
|
||||
let valueE = v * 10 ** stepInfo[1]
|
||||
let remainder = valueE % step
|
||||
let remainderInt = Math.floor(remainder)
|
||||
// 对余数四舍五入0-1
|
||||
let sub = Math.round(remainder / step)
|
||||
let value = (Math.floor(valueE) - remainderInt + sub*step) / (10 ** stepInfo[1])
|
||||
value = Number((value + this.min).toFixed(stepInfo[1]))
|
||||
return value
|
||||
},
|
||||
/**
|
||||
* @param {Object} v
|
||||
* @param {Object} isSub 是否是副副进度条
|
||||
*/
|
||||
stepInfo(isSub) {
|
||||
// return step, decimal位数
|
||||
let step
|
||||
if(isSub) {
|
||||
step = Number(this.subStep)
|
||||
}
|
||||
else {
|
||||
step = Number(this.step)
|
||||
}
|
||||
|
||||
if (step <= 0 || !step){
|
||||
return [1, 0]
|
||||
}
|
||||
else{
|
||||
let steps = step.toString().split('.')
|
||||
if (steps.length == 1){
|
||||
return [step,0]
|
||||
}
|
||||
else {
|
||||
return [step,steps[1].length]
|
||||
}
|
||||
}
|
||||
},
|
||||
textWidth() {
|
||||
if(this.showValueState()) {
|
||||
let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
|
||||
let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
|
||||
return Number(textWidth.toFixed(2))
|
||||
}
|
||||
return 0
|
||||
},
|
||||
valueWidth() {
|
||||
let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
|
||||
let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
|
||||
return Number(textWidth.toFixed(2))
|
||||
},
|
||||
maxHeight() {
|
||||
let h = []
|
||||
if (this.direction!='vertical'){ // direction 为 vertical 时不显示info
|
||||
let subt = this.infoEndText.match(/[^\x00-\xff]/g)
|
||||
if (subt){
|
||||
h.push(this.sizeDeal(this.infoFontSize)[0] * 1.1)
|
||||
}
|
||||
else{
|
||||
h.push(this.sizeDeal(this.infoFontSize)[0])
|
||||
}
|
||||
}
|
||||
h.push(this.sizeDeal(this.strokeWidth)[0])
|
||||
h.push(this.sizeDeal(this.handleHeight)[0])
|
||||
h.sort(function(a, b) {
|
||||
return b - a
|
||||
}) // 降序
|
||||
return [h[0], 'px', h[0] + 'px']
|
||||
},
|
||||
sizeDeal(size) {
|
||||
// 分离字体大小和单位,rpx 转 px
|
||||
let s = Number.isNaN(parseFloat(size)) ? 0 : parseFloat(size)
|
||||
let u = size.toString().replace(/[0-9\.]/g, '')
|
||||
if (u == 'rpx') {
|
||||
s /= this.px2rpx
|
||||
u = 'px'
|
||||
}else if (u == 'vw') {
|
||||
u = 'px'
|
||||
s = s / 100 * this.screenWidth
|
||||
} else if(u == 'vh') {
|
||||
u = 'px'
|
||||
s = s / 100 * this.screenHeight
|
||||
} else{
|
||||
u = 'px'
|
||||
}
|
||||
|
||||
return [s, u, s + u]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "bing-progress.css"
|
||||
</style>
|
||||
16
components/zhuo-tabs/zhuo-tabs.vue
Normal file
16
components/zhuo-tabs/zhuo-tabs.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<view class="zhuo-tabs"></view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'zhuo-tabs',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.zhuo-tabs
|
||||
</style>
|
||||
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"id": "arc-slider",
|
||||
"name": "弧形滑动选择器",
|
||||
"displayName": "弧形滑动选择器",
|
||||
"version": "3.0.1",
|
||||
"description": "弧形滑动选择器",
|
||||
"keywords": [
|
||||
"弧线",
|
||||
"选择器",
|
||||
"滑动",
|
||||
"滑动选择器"
|
||||
],
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
}
|
||||
}
|
||||
176
packageA/pages/UnitDetails/UnitDetails.vue
Normal file
176
packageA/pages/UnitDetails/UnitDetails.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 单位基本信息 -->
|
||||
<view class="company-header">
|
||||
<text class="company-name">湖南沃森电器科技有限公司</text>
|
||||
<view class="company-info">
|
||||
<view class="location">
|
||||
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
|
||||
青岛 青岛经济技术开发区
|
||||
</view>
|
||||
<text class="industry">制造业 100-299人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<!-- 单位介绍 -->
|
||||
<view class="company-description">
|
||||
<view class="section-title">单位介绍</view>
|
||||
<text class="description">
|
||||
我司在永磁同步电机行业技术优势明显：最高载频达24kHZ，最高运行频率3000HZ，最高运行转速达到180000rpm。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 在招职位 -->
|
||||
<view class="job-list">
|
||||
<text class="section-title">在招职位</text>
|
||||
<view class="job-row" v-for="job in jobs" :key="job.id">
|
||||
<view class="left">
|
||||
<text class="job-title">{{ job.title }}</text>
|
||||
<view class="job-tags">
|
||||
<view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view>
|
||||
</view>
|
||||
<text class="location">{{ job.location }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="salary">{{ job.salary }}</text>
|
||||
<text class="hot" v-if="job.hot">🔥</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
jobs: [
|
||||
{
|
||||
id: 1,
|
||||
title: '销售工程师-高级销售经理',
|
||||
tags: ['本科', '3-5年', '15人', '本科', '3-5年', '15人'],
|
||||
company: '湖南沃森电气科技有限公司',
|
||||
location: '青岛 青岛经济技术开发区',
|
||||
salary: '1万-2万',
|
||||
hot: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '销售工程师-初级销售经理',
|
||||
tags: ['本科', '3-5年', '15人'],
|
||||
company: '湖南沃森电气科技有限公司',
|
||||
location: '青岛 青岛经济技术开发区',
|
||||
salary: '5千-1万',
|
||||
hot: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '销售助理',
|
||||
tags: ['大专', '3-5年', '20人'],
|
||||
company: '湖南沃森电气科技有限公司',
|
||||
location: '青岛 青岛经济技术开发区',
|
||||
salary: '5千-8千',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '销售客服',
|
||||
tags: ['大专', '3-5年', '50人'],
|
||||
company: '湖南沃森电气科技有限公司',
|
||||
location: '青岛 青岛经济技术开发区',
|
||||
salary: '5千-8千',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.container
|
||||
display flex
|
||||
flex-direction column
|
||||
background-color #f8f8f8
|
||||
.hr
|
||||
height: 10rpx;
|
||||
.company-header
|
||||
padding 20rpx 40rpx
|
||||
background-color #fff
|
||||
.company-name
|
||||
font-size 56rpx
|
||||
font-weight bold
|
||||
color #333
|
||||
margin-bottom 10rpx
|
||||
.company-info
|
||||
font-size 24rpx
|
||||
color #666
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
.location
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
.company-description
|
||||
padding 20rpx 40rpx
|
||||
background-color #fff
|
||||
margin-bottom 10rpx
|
||||
.section-title
|
||||
font-size 42rpx
|
||||
font-weight bold
|
||||
margin-bottom 10rpx
|
||||
|
||||
.description
|
||||
font-size 24rpx
|
||||
color #333
|
||||
line-height 36rpx
|
||||
|
||||
.job-list
|
||||
padding 20rpx 40rpx
|
||||
background-color #fff
|
||||
.section-title
|
||||
font-size 42rpx
|
||||
font-weight bold
|
||||
margin-bottom 10rpx
|
||||
.job-row
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items flex-start
|
||||
padding 20rpx
|
||||
border 2rpx solid #D9D9D9
|
||||
margin-top 20rpx
|
||||
border-radius 17rpx 17rpx 17rpx 17rpx
|
||||
.left
|
||||
display flex
|
||||
flex-direction column
|
||||
flex-grow 1
|
||||
.job-title
|
||||
font-size 28rpx
|
||||
font-weight bold
|
||||
color #333
|
||||
margin-bottom 10rpx
|
||||
.job-tags
|
||||
display flex
|
||||
gap 10rpx
|
||||
margin-bottom 10rpx
|
||||
.tag
|
||||
background-color #22c55e
|
||||
color #fff
|
||||
padding 5rpx 10rpx
|
||||
border-radius 12rpx
|
||||
font-size 20rpx
|
||||
.location
|
||||
font-size 24rpx
|
||||
color #666
|
||||
.right
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items flex-end
|
||||
.salary
|
||||
font-size 28rpx
|
||||
color #3b82f6
|
||||
font-weight bold
|
||||
.hot
|
||||
color #ff6b6b
|
||||
font-size 24rpx
|
||||
margin-top 5rpx
|
||||
</style>
|
||||
88
packageA/pages/choiceness/choiceness.vue
Normal file
88
packageA/pages/choiceness/choiceness.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">精选企业</view>
|
||||
|
||||
<!-- 格子布局 -->
|
||||
<view class="grid-container">
|
||||
<view class="grid-item blue">
|
||||
<text class="title">事业单位</text>
|
||||
<view class="status">已关注 ✓</view>
|
||||
</view>
|
||||
|
||||
<view class="grid-item green">
|
||||
<text class="title">银行招聘</text>
|
||||
<view class="status">特别关注</view>
|
||||
</view>
|
||||
|
||||
<view class="grid-item orange">
|
||||
<text class="title">世界500强</text>
|
||||
<view class="status">特别关注</view>
|
||||
</view>
|
||||
|
||||
<view class="grid-item red">
|
||||
<text class="title">中国500强</text>
|
||||
<view class="status">特别关注</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
/* 页面整体样式 */
|
||||
.container
|
||||
background-color #edf4ff
|
||||
height 100%
|
||||
display flex
|
||||
flex-direction column
|
||||
padding 20rpx
|
||||
|
||||
/* 搜索栏样式 */
|
||||
.search-bar
|
||||
font-size 32rpx
|
||||
font-weight bold
|
||||
color #333
|
||||
margin-bottom 20rpx
|
||||
|
||||
/* 格子布局样式 */
|
||||
.grid-container
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
justify-content space-between
|
||||
gap 20rpx
|
||||
|
||||
.grid-item
|
||||
width 48%
|
||||
height 200rpx
|
||||
border-radius 20rpx
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
color #fff
|
||||
font-size 28rpx
|
||||
font-weight bold
|
||||
position relative
|
||||
|
||||
.status
|
||||
position absolute
|
||||
bottom 20rpx
|
||||
font-size 24rpx
|
||||
background-color rgba(255, 255, 255, 0.9)
|
||||
color #333
|
||||
padding 5rpx 15rpx
|
||||
border-radius 15rpx
|
||||
|
||||
/* 每种格子对应的颜色 */
|
||||
.blue
|
||||
background-color #3b82f6
|
||||
|
||||
.green
|
||||
background-color #22c55e
|
||||
|
||||
.orange
|
||||
background-color #f59e0b
|
||||
|
||||
.red
|
||||
background-color #ef4444
|
||||
</style>
|
||||
147
packageA/pages/exhibitors/exhibitors.vue
Normal file
147
packageA/pages/exhibitors/exhibitors.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 招聘会详情标题 -->
|
||||
<view class="header">
|
||||
<text class="header-title">2024年春季青岛市商贸服务业招聘会</text>
|
||||
<view class="header-info">
|
||||
<view class="location">
|
||||
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
|
||||
青岛 市南区延安三路105号
|
||||
</view>
|
||||
<text class="date">2024年7月31日 周三</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 参会单位列表 -->
|
||||
<view class="company-list">
|
||||
<text class="section-title">参会单位</text>
|
||||
<view class="company-row" v-for="company in companies" :key="company.id">
|
||||
<view class="left">
|
||||
<view class="logo" :class="'logo-' + company.id">{{ company.id }}</view>
|
||||
<view class="company-info">
|
||||
<text class="company-name line_2">{{ company.name }}</text>
|
||||
<text class="industry">{{ company.industry }}</text>
|
||||
<view class="details">
|
||||
<text>查看详情</text>
|
||||
<uni-icons type="star" size="26"></uni-icons>
|
||||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="26"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
companies: [
|
||||
{
|
||||
id: 1,
|
||||
name: '湖南沃森电器科技有限公司',
|
||||
industry: '制造业 100-299人',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '青岛成达汽车销售集团',
|
||||
industry: '制造业 100-299人',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '青岛日森电器有限公司',
|
||||
industry: '制造业 100-299人',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '青岛融合网络通信有限公司',
|
||||
industry: '制造业 100-299人',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
display flex
|
||||
flex-direction column
|
||||
background-color #f8f8f8
|
||||
|
||||
.header
|
||||
padding 20rpx 40rpx
|
||||
background-color #fff
|
||||
.header-title
|
||||
font-size 56rpx
|
||||
font-weight bold
|
||||
color #333
|
||||
margin-bottom 10rpx
|
||||
.header-info
|
||||
margin-top: 20rpx
|
||||
font-size 24rpx
|
||||
color #666
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
.location
|
||||
display flex
|
||||
align-items center
|
||||
.date
|
||||
flex-shrink 0
|
||||
|
||||
.company-list
|
||||
padding 20rpx
|
||||
background-color #fff
|
||||
margin-top 10rpx
|
||||
.section-title
|
||||
padding 20rpx
|
||||
font-size 40rpx
|
||||
font-weight bold
|
||||
margin-bottom 10rpx
|
||||
|
||||
.company-row
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
padding 20rpx
|
||||
border 2rpx solid #D9D9D9
|
||||
margin-top 20rpx
|
||||
border-radius 17rpx 17rpx 17rpx 17rpx
|
||||
.left
|
||||
display flex
|
||||
align-items center
|
||||
width: 100%
|
||||
height: 100%
|
||||
.logo
|
||||
background-color #22c55e
|
||||
color #fff
|
||||
font-size 24rpx
|
||||
font-weight bold
|
||||
width: 235rpx;
|
||||
height: 164rpx;
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
border-radius 12rpx
|
||||
margin-right 20rpx
|
||||
.company-info
|
||||
min-height 164rpx
|
||||
flex 1
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content space-between
|
||||
.company-name
|
||||
font-size 28rpx
|
||||
color #333
|
||||
font-weight bold
|
||||
.industry
|
||||
font-size 24rpx
|
||||
color #666
|
||||
.details
|
||||
font-size 24rpx
|
||||
color #666
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
</style>
|
||||
206
packageA/pages/myResume/myResume.vue
Normal file
206
packageA/pages/myResume/myResume.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 头部信息 -->
|
||||
<view class="header">
|
||||
<view class="avatar"></view>
|
||||
<view class="info">
|
||||
<view class="name-row">
|
||||
<text class="name">用户姓名</text>
|
||||
<!-- <view class="edit-icon"></view> -->
|
||||
</view>
|
||||
<text class="details">男 23岁</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 简历信息 -->
|
||||
<view class="resume-info">
|
||||
<view class="info-card">
|
||||
<view class="card-content">
|
||||
<text class="label">出生年月：</text>
|
||||
<text class="value">2001/01/01</text>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<text class="label">学历：</text>
|
||||
<text class="value">2001/01/01</text>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<text class="label">政治面貌：</text>
|
||||
<text class="value">2001/01/01</text>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<text class="label">联系方式：</text>
|
||||
<text class="value">2001/01/01</text>
|
||||
</view>
|
||||
<view class="edit-icon">
|
||||
<image class="img" src="../../../static/icon/edit.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 期望职位 -->
|
||||
<view class="resume-info">
|
||||
<view class="info-card">
|
||||
<view class="card-content">
|
||||
<text class="label">期望职位：</text>
|
||||
<view class="value">
|
||||
<view>销售工程师</view>
|
||||
<view>销售工程师</view>
|
||||
<view>销售工程师</view>
|
||||
<view>销售工程师</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-icon">
|
||||
<image class="img" src="../../../static/icon/edit.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 期望薪资 -->
|
||||
<view class="resume-info">
|
||||
<view class="info-card">
|
||||
<view class="card-content">
|
||||
<text class="label">期望薪资：</text>
|
||||
<view class="value">8-10k</view>
|
||||
</view>
|
||||
<view class="edit-icon">
|
||||
<image class="img" src="../../../static/icon/edit.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 期望工作地 -->
|
||||
<view class="resume-info">
|
||||
<view class="info-card">
|
||||
<view class="card-content">
|
||||
<text class="label long">期望工作地：</text>
|
||||
<view class="value">青岛-青岛经济技术开发区</view>
|
||||
</view>
|
||||
<view class="edit-icon">
|
||||
<image class="img" src="../../../static/icon/edit.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传按钮 -->
|
||||
<view class="upload-btn">
|
||||
<button class="btn">
|
||||
<uni-icons type="cloud-upload" size="30" color="#FFFFFF"></uni-icons>
|
||||
上传简历
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items center
|
||||
|
||||
.header
|
||||
display flex
|
||||
align-items center
|
||||
padding 30rpx 60rpx
|
||||
width calc(100% - 120rpx)
|
||||
border-radius 0 0 20rpx 20rpx
|
||||
.avatar
|
||||
width 100rpx
|
||||
height 100rpx
|
||||
background-color #ccc
|
||||
border-radius 50%
|
||||
margin-right 20rpx
|
||||
.info
|
||||
display flex
|
||||
flex-direction column
|
||||
.name-row
|
||||
display flex
|
||||
align-items center
|
||||
.name
|
||||
font-size 36rpx
|
||||
font-weight bold
|
||||
color #fff
|
||||
.edit-icon
|
||||
width 30rpx
|
||||
height 30rpx
|
||||
background-color #fff
|
||||
border-radius 50%
|
||||
margin-left 10rpx
|
||||
.details
|
||||
font-size 24rpx
|
||||
color #dbeafe
|
||||
|
||||
.resume-info
|
||||
padding: 0 26rpx
|
||||
width calc(100% - 52rpx)
|
||||
margin-top 20rpx
|
||||
.info-card
|
||||
display flex
|
||||
flex-direction: column
|
||||
justify-content space-between
|
||||
align-items center
|
||||
color #fff
|
||||
padding 10rpx 24rpx
|
||||
border-radius 12rpx
|
||||
margin-bottom 10rpx
|
||||
background: #4778EC;
|
||||
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
position: relative
|
||||
.card-content
|
||||
width: 100%
|
||||
display flex
|
||||
line-height: 58rpx
|
||||
margin-top 16rpx
|
||||
.label
|
||||
width 160rpx
|
||||
height: 32rpx
|
||||
font-size 28rpx
|
||||
color #FFFFFF
|
||||
text-align:justify;
|
||||
margin-right: 20rpx
|
||||
.long
|
||||
width 180rpx
|
||||
margin-right: 0rpx
|
||||
.label:after
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
.value
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
.card-content:first-child
|
||||
margin-top 0
|
||||
.edit-icon
|
||||
position: absolute
|
||||
right: 40rpx
|
||||
top: 20rpx
|
||||
width 40rpx
|
||||
height 40rpx
|
||||
.img
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.upload-btn
|
||||
margin-top 20rpx
|
||||
.btn
|
||||
display: flex
|
||||
align-items: center
|
||||
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
|
||||
height 80rpx
|
||||
background-color #22c55e
|
||||
color #fff
|
||||
font-size 28rpx
|
||||
font-weight bold
|
||||
border-radius 20rpx
|
||||
</style>
|
||||
146
packageA/pages/post/post.vue
Normal file
146
packageA/pages/post/post.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="job-header">
|
||||
<view class="job-title">销售工程师-高级销售经理</view>
|
||||
<view class="job-info">
|
||||
<text class="salary">1万-2万/月</text>
|
||||
<text class="views">1024浏览</text>
|
||||
</view>
|
||||
<view class="location-info">
|
||||
<text class="location">📍 青岛 青岛经济技术开发区</text>
|
||||
<text class="date">2022.1.3</text>
|
||||
<view class="source">来源 智联招聘</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="job-details">
|
||||
<text class="details-title">职位详情</text>
|
||||
<view class="tags">
|
||||
<view class="tag">本科</view>
|
||||
<view class="tag">3-5年</view>
|
||||
</view>
|
||||
<view class="description">
|
||||
（我司在永磁同步电机行业技术优势明显：最高载频24kHZ，最高运行频率3000HZ，最高运行转速180000rpm。）职责：
|
||||
<br />
|
||||
1、结合公司业务优势，深挖行业大客户需求，为客户提供针对性的营销解决方案；
|
||||
<br />
|
||||
2、有丰富的项目落地执行经验；
|
||||
<br />
|
||||
3、做好应收款控制与管理。
|
||||
<br />
|
||||
要求：
|
||||
<br />
|
||||
1、统招本科以上学历，电气相关专业；
|
||||
<br />
|
||||
2、有3年以上从事变频器或相关经验者优先。
|
||||
<br />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="company-info" @click="navTo('/packageA/pages/UnitDetails/UnitDetails')">
|
||||
<view class="company-name">湖南沃森电气科技有限公司</view>
|
||||
<view class="company-details">制造业 100-299人 单位详情</view>
|
||||
</view>
|
||||
|
||||
<view class="footer">
|
||||
<button class="apply-btn">立即申请</button>
|
||||
<view class="falls-card-matchingrate">
|
||||
<uni-icons type="star" size="40"></uni-icons>
|
||||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="40"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
display flex
|
||||
flex-direction column
|
||||
background-color #f8f8f8
|
||||
.job-header
|
||||
padding 20rpx 40rpx
|
||||
background-color #ffffff
|
||||
margin-bottom 10rpx
|
||||
.job-title
|
||||
font-size 55rpx
|
||||
font-weight bold
|
||||
color #333
|
||||
margin-bottom 10rpx
|
||||
.job-info
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin-bottom 10rpx
|
||||
.salary
|
||||
color #3b82f6
|
||||
font-size 42rpx
|
||||
font-weight bold
|
||||
.views
|
||||
font-size 24rpx
|
||||
color #999
|
||||
.location-info
|
||||
font-size 24rpx
|
||||
color #666
|
||||
.location, .source, .date
|
||||
margin-right 10rpx
|
||||
margin-top: 20rpx
|
||||
.source
|
||||
margin-left: 30rpx;
|
||||
|
||||
.job-details
|
||||
background-color #fff
|
||||
padding 20rpx 40rpx
|
||||
margin-bottom 10rpx
|
||||
.details-title
|
||||
font-size 41rpx
|
||||
font-weight bold
|
||||
margin-bottom 15rpx
|
||||
.tags
|
||||
display flex
|
||||
gap 10rpx
|
||||
margin 15rpx 0
|
||||
.tag
|
||||
background-color #3b82f6
|
||||
color #fff
|
||||
padding 5rpx 15rpx
|
||||
border-radius 15rpx
|
||||
font-size 22rpx
|
||||
.description
|
||||
font-size 24rpx
|
||||
line-height 36rpx
|
||||
color #333
|
||||
|
||||
.company-info
|
||||
background-color #fff
|
||||
padding 20rpx 40rpx
|
||||
margin-bottom 10rpx
|
||||
.company-name
|
||||
font-size 28rpx
|
||||
font-weight bold
|
||||
margin-bottom 10rpx
|
||||
.company-details
|
||||
font-size 24rpx
|
||||
color #666
|
||||
|
||||
.footer
|
||||
position fixed
|
||||
bottom calc(var(--status-bar-height) + var(--window-bottom))
|
||||
left 0
|
||||
width calc(100% - 40rpx)
|
||||
padding 20rpx
|
||||
background-color #fff
|
||||
text-align center
|
||||
display flex
|
||||
align-items: center
|
||||
.apply-btn
|
||||
flex: 1
|
||||
background-color #22c55e
|
||||
color #fff
|
||||
border-radius 30rpx
|
||||
font-size 32rpx
|
||||
margin-right: 30rpx
|
||||
</style>
|
||||
66
pages.json
66
pages.json
@@ -3,25 +3,25 @@
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/msglog/msglog",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/careerfair/careerfair",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -30,13 +30,65 @@
|
||||
"navigationBarTitleText": "登录",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/nearby/nearby",
|
||||
"style": {
|
||||
"navigationBarTitleText": "附近",
|
||||
"navigationBarBackgroundColor": "#4778EC",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subpackages": [{
|
||||
"root": "packageA",
|
||||
"pages": [{
|
||||
"path": "pages/choiceness/choiceness",
|
||||
"style": {
|
||||
"navigationBarTitleText": "精选",
|
||||
"navigationBarBackgroundColor": "#4778EC",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/post/post",
|
||||
"style": {
|
||||
"navigationBarTitleText": "职位详情",
|
||||
"navigationBarBackgroundColor": "#4778EC",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/UnitDetails/UnitDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "单位详情",
|
||||
"navigationBarBackgroundColor": "#4778EC",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/exhibitors/exhibitors",
|
||||
"style": {
|
||||
"navigationBarTitleText": "参展单位",
|
||||
"navigationBarBackgroundColor": "#4778EC",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/myResume/myResume",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的简历",
|
||||
"navigationBarBackgroundColor": "#4778EC",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}]
|
||||
}],
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#3cc51f",
|
||||
"selectedColor": "#002979",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"midButton": {
|
||||
"width": "50px",
|
||||
"height": "50px",
|
||||
"backgroundImage": "static/tabbar/logo2.png"
|
||||
},
|
||||
"list": [{
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "static/tabbar/post.png",
|
||||
@@ -52,13 +104,13 @@
|
||||
{
|
||||
"pagePath": "pages/msglog/msglog",
|
||||
"iconPath": "static/tabbar/chat4.png",
|
||||
"selectedIconPath": "static/tabbar/chat4.png",
|
||||
"selectedIconPath": "static/tabbar/chat4ed.png",
|
||||
"text": "消息"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/mine",
|
||||
"iconPath": "static/tabbar/mine.png",
|
||||
"selectedIconPath": "static/tabbar/mine.png",
|
||||
"selectedIconPath": "static/tabbar/mined.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,22 +1,191 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="app-container">
|
||||
<view class="careerfair-AI">AI+就业服务程序</view>
|
||||
<view class="careerfair-tab">
|
||||
<view class="careerfair-tab-options actived">现场招聘</view>
|
||||
<view class="careerfair-tab-options">VR虚拟招聘会</view>
|
||||
</view>
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="careerfair-scroll">
|
||||
<view class="careerfair-date">
|
||||
<view class="date-list" v-for="(item, index) in state.dateList" :key="index">
|
||||
<view class="date-list-item">{{ item.day }}</view>
|
||||
<view class="date-list-item active">{{ item.date }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view :scroll-y="true" class="careerfair-list-scroll">
|
||||
<view class="careerfair-list">
|
||||
<view class="careerfair-list-card" v-for="(item, index) in 10" :key="index">
|
||||
<view class="card-title">2024年春季青岛市商贸服务业招聘会</view>
|
||||
<view class="card-intro">
|
||||
<view class="line_2">内容简介……</view>
|
||||
<view class="intro-distance">500m以内</view>
|
||||
</view>
|
||||
<view class="card-address">市南区延安三路105号</view>
|
||||
<view class="card-footer">
|
||||
<view class="cardfooter-lf">
|
||||
<view class="card-company">市南区就业人才中心</view>
|
||||
<view class="card-date">7月31日（周三）14:00-18:00</view>
|
||||
</view>
|
||||
<view class="cardfooter-ri" @click="navTo('/packageA/pages/exhibitors/exhibitors')">
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
const state = reactive({
|
||||
dateList: [],
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoad(() => {
|
||||
state.dateList = getNextMonthDates();
|
||||
});
|
||||
|
||||
}
|
||||
// 获取往后三十天日期
|
||||
function getNextMonthDates() {
|
||||
const today = new Date();
|
||||
const dates = [];
|
||||
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const date = new Date(today); // 创建当天的副本
|
||||
date.setDate(today.getDate() + i); // 设置日期为往后第 i 天
|
||||
const formattedDate = date.toISOString().slice(0, 10).slice(8); // 格式化为 YYYY-MM-DD
|
||||
const dayOfWeek = dayNames[date.getDay()]; // 获取星期几
|
||||
dates.push({
|
||||
date: formattedDate,
|
||||
day: dayOfWeek,
|
||||
});
|
||||
}
|
||||
dates[0].date = '今天';
|
||||
dates[1].date = '明天';
|
||||
return dates;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.app-container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.careerfair-AI
|
||||
height: 42rpx;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 35rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 41rpx;
|
||||
padding: 85rpx 0 0 30rpx;
|
||||
.careerfair-tab
|
||||
margin: 20rpx 0 0 30rpx;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.careerfair-tab-options
|
||||
background: #4778EC;
|
||||
padding: 0 20rpx;
|
||||
height: 63rpx;
|
||||
line-height: 63rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
.actived
|
||||
position: relative;
|
||||
background: #FFAD47;
|
||||
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
|
||||
.careerfair-tab-options:first-child
|
||||
border-radius: 17rpx 0rpx 0rpx 0rpx;
|
||||
.careerfair-tab-options:last-child
|
||||
border-radius: 0rpx 17rpx 0rpx 0rpx;
|
||||
.careerfair-scroll
|
||||
background: #4778EC;
|
||||
.careerfair-date
|
||||
height: 119rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
width: fit-content;
|
||||
.date-list
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(750rpx / 7);
|
||||
.date-list-item:nth-child(2)
|
||||
font-size: 19rpx;
|
||||
margin-top: 10rpx;
|
||||
.active
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background: #FFAD47;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
.careerfair-list-scroll
|
||||
overflow: hidden;
|
||||
background: linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, #FFFFFF 100%);
|
||||
.careerfair-list
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 25rpx 28rpx;
|
||||
.careerfair-list-card
|
||||
margin-top: 36rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
padding: 20rpx;
|
||||
.card-title
|
||||
height: 68rpx;
|
||||
font-size: 35rpx;
|
||||
color: #606060;
|
||||
line-height: 68rpx;
|
||||
.card-intro,.card-address,.card-company,.card-date
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
margin-top: 13rpx;
|
||||
.card-footer
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.cardfooter-ri
|
||||
width: 206rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background: #FFAD47;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
.card-intro
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.intro-distance
|
||||
height: 30rpx;
|
||||
background: #13C57C;
|
||||
padding: 3rpx 8rpx;
|
||||
line-height: 30rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 21rpx;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
.careerfair-list-card:first-child
|
||||
margin-top: 0;
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,117 @@
|
||||
<template>
|
||||
<view class="content"></view>
|
||||
<view class="app-containers">
|
||||
<view class="index-AI">AI+就业服务程序</view>
|
||||
<view class="index-option">
|
||||
<view class="option-left">
|
||||
<view class="left-item" @click="navTo('/pages/nearby/nearby')">附近</view>
|
||||
<view class="left-item" @click="navTo('/packageA/pages/choiceness/choiceness')">精选</view>
|
||||
<view class="left-item">职业图谱</view>
|
||||
</view>
|
||||
<view class="option-right">
|
||||
<input class="uni-input right-input" confirm-type="search" />
|
||||
<uni-icons class="iconsearch" color="#FFFFFF" type="search" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab -->
|
||||
<view class="tab-options">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="tab-op-left">
|
||||
<view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="tab-op-right">
|
||||
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
|
||||
<view class="tab-recommend">推荐</view>
|
||||
<view class="tab-filter">
|
||||
<view class="tab-number">1000+</view>
|
||||
<image class="image" src="/static/icon/filter.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- waterfalls -->
|
||||
<scroll-view :scroll-y="true" class="falls-scroll">
|
||||
<view class="falls">
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="state.list">
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="falls-card" @click="navTo('/packageA/pages/post/post')">
|
||||
<view class="falls-card-title">销售工程师</view>
|
||||
<view class="falls-card-pay">1万-2万/月</view>
|
||||
<view class="falls-card-education">本科</view>
|
||||
<view class="falls-card-experience">3-5年</view>
|
||||
<view class="falls-card-company">德阳人社</view>
|
||||
<view class="falls-card-company">青岛 青岛经济技术开发区</view>
|
||||
<view class="falls-card-pepleNumber">
|
||||
<view>2024.1.8</view>
|
||||
<view>8人</view>
|
||||
</view>
|
||||
<view class="falls-card-matchingrate">
|
||||
<view class="">匹配度95%</view>
|
||||
<uni-icons type="star" size="30"></uni-icons>
|
||||
<uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch } from 'vue';
|
||||
import img from '/static/icon/filter.png';
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import useUserStore from '../../stores/useUserStore';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
const userStore = useUserStore();
|
||||
const waterfallsFlowRef = ref(null);
|
||||
const state = reactive({
|
||||
title: '123123123房贷首付打的手机家里好玩的很浓厚第卡后sdhiwohdijasnbdhoui1很努力',
|
||||
list: [
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
image: img,
|
||||
hide: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
onShow(() => {
|
||||
console.log('onShow');
|
||||
});
|
||||
onLoad(() => {
|
||||
console.log('onLoad');
|
||||
$api.sleep(2000).then(() => {
|
||||
navTo('/pages/login/login');
|
||||
});
|
||||
// $api.sleep(2000).then(() => {
|
||||
// navTo('/pages/login/login');
|
||||
// });
|
||||
});
|
||||
|
||||
watch(
|
||||
@@ -29,6 +122,156 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.app-containers
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.index-AI
|
||||
height: 42rpx;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 35rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 41rpx;
|
||||
padding: 85rpx 0 0 30rpx;
|
||||
.index-option
|
||||
margin-top: 27rpx;
|
||||
display: flex;
|
||||
.option-left
|
||||
display: flex;
|
||||
width: 427rpx;
|
||||
height: 56rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 0rpx 17rpx 17rpx 0rpx;
|
||||
align-items: center;
|
||||
.left-item
|
||||
width: 117rpx;
|
||||
text-align: center;
|
||||
line-height: 47rpx;
|
||||
height: 47rpx;
|
||||
margin-right: 27rpx;
|
||||
color: #FFFFFF;
|
||||
.left-item:active
|
||||
color: blue;
|
||||
.option-right
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 49rpx;
|
||||
.right-input
|
||||
width: 100%;
|
||||
height: 45rpx;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
border: 3rpx solid #FFFFFF;
|
||||
padding: 0 50rpx 0 10rpx;
|
||||
color: #FFFFFF;
|
||||
.iconsearch
|
||||
position: absolute;
|
||||
right: 60rpx;
|
||||
.tab-options
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 77rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
padding: 0 24rpx;
|
||||
overflow: hidden;
|
||||
.tab-scroll
|
||||
height: 77rpx;
|
||||
line-height: 77rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-right: 10rpx;
|
||||
.tab-op-left
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.tab-list
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606060;
|
||||
.tab-op-right
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tab-recommend
|
||||
white-space: nowrap;
|
||||
width: 92rpx;
|
||||
height: 42rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 21rpx;
|
||||
line-height: 42rpx;
|
||||
margin-right: 12rpx;
|
||||
.tab-number
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
.tab-filter
|
||||
display: flex;
|
||||
.image
|
||||
width: 28rpx;
|
||||
height: 27rpx;
|
||||
.falls-scroll
|
||||
flex: 1;
|
||||
overflow: hidden
|
||||
.falls
|
||||
padding: 20rpx 40rpx;
|
||||
.falls-card
|
||||
padding: 30rpx;
|
||||
.falls-card-title
|
||||
height: 49rpx;
|
||||
font-size: 42rpx;
|
||||
color: #606060;
|
||||
line-height: 49rpx;
|
||||
text-align: left;
|
||||
.falls-card-pay
|
||||
height: 50rpx;
|
||||
font-size: 35rpx;
|
||||
color: #002979;
|
||||
line-height: 50rpx;
|
||||
text-align: left;
|
||||
.falls-card-education,.falls-card-experience
|
||||
width: fit-content;
|
||||
height: 30rpx;
|
||||
background: #13C57C;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
padding: 0 10rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
margin-top: 14rpx;
|
||||
.falls-card-company,.falls-card-pepleNumber
|
||||
margin-top: 14rpx;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: left;
|
||||
.falls-card-pepleNumber
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.falls-card-matchingrate
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 21rpx;
|
||||
color: #4778EC;
|
||||
text-align: left;
|
||||
.logo
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="stylus" scoped>
|
||||
.tab-container
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<view class="color_FFFFFF fs_30">选择您的性别1/6</view>
|
||||
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
||||
</view>
|
||||
<view class="fl_box fl_justmiddle">
|
||||
<view class="fl_box fl_justmiddle fl_1 fl_alstart">
|
||||
<view class="tabtwo-sex">
|
||||
<image class="sex-img" src="../../static/icon/woman.png"></image>
|
||||
<view class="mar_top5">女</view>
|
||||
@@ -72,7 +72,6 @@
|
||||
<view class="eductionbtn">留学-硕士</view>
|
||||
<view class="eductionbtn">留学-博士</view>
|
||||
</view>
|
||||
<view class="fl_box fl_justmiddle"></view>
|
||||
<view class="nextstep" @tap="nextStep">下一步</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -86,7 +85,7 @@
|
||||
<view class="salary">
|
||||
<scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
|
||||
<view class="salary-content-item">不限</view>
|
||||
<view class="salary-content-item">2k</view>
|
||||
<view class="salary-content-item salary-content-item-selected">2k</view>
|
||||
<view class="salary-content-item">5k</view>
|
||||
<view class="salary-content-item">10k</view>
|
||||
<view class="salary-content-item">15k</view>
|
||||
@@ -94,7 +93,7 @@
|
||||
<view class="center-text">至</view>
|
||||
<scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
|
||||
<view class="salary-content-item">不限</view>
|
||||
<view class="salary-content-item">2k</view>
|
||||
<view class="salary-content-item salary-content-item-selected">2k</view>
|
||||
<view class="salary-content-item">5k</view>
|
||||
<view class="salary-content-item">10k</view>
|
||||
<view class="salary-content-item">15k</view>
|
||||
@@ -112,21 +111,59 @@
|
||||
<view class="color_FFFFFF fs_30">您期望的求职区域5/6</view>
|
||||
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
||||
</view>
|
||||
<view class="fl_box fl_justmiddle"></view>
|
||||
<view class="eduction-content">
|
||||
<view class="eductionbtn eductionbtned">市南区</view>
|
||||
<view class="eductionbtn">市北区</view>
|
||||
<view class="eductionbtn">李沧区</view>
|
||||
<view class="eductionbtn">崂山区</view>
|
||||
<view class="eductionbtn">荒岛区</view>
|
||||
<view class="eductionbtn">城阳区</view>
|
||||
<view class="eductionbtn">即墨区</view>
|
||||
<view class="eductionbtn">胶州市</view>
|
||||
<view class="eductionbtn">平度市</view>
|
||||
<view class="eductionbtn">莱西市</view>
|
||||
<view class="eductionbtn">不限区域</view>
|
||||
</view>
|
||||
<view class="nextstep" @tap="nextStep">下一步</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- tab6 -->
|
||||
<template v-slot:tab6>
|
||||
<view class="tabtwo">
|
||||
<view class="tabtwo-top">
|
||||
<view class="tabtwo sex-two">
|
||||
<view class="tabtwo-top mar_top25 mar_le25">
|
||||
<view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
|
||||
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
||||
</view>
|
||||
<view class="fl_box fl_justmiddle"></view>
|
||||
<!-- <view class="nextstep" @tap="complate">完成</view> -->
|
||||
<view class="sex-search">
|
||||
<uni-icons class="iconsearch" type="search" size="20"></uni-icons>
|
||||
<input class="uni-input searchinput" confirm-type="search" />
|
||||
</view>
|
||||
<view class="sex-content fl_1">
|
||||
<scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-left">
|
||||
<view
|
||||
v-for="item in state.station"
|
||||
:key="item.value"
|
||||
class="left-list-btn"
|
||||
:class="{ 'left-list-btned': item.value === state.stationCateLog }"
|
||||
@click="changeStationLog(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-right">
|
||||
<view class="grid-sex">
|
||||
<view class="sex-right-btn sex-right-btned">客户经理</view>
|
||||
<view class="sex-right-btn">客户经理</view>
|
||||
<view class="sex-right-btn">客户经理</view>
|
||||
<view class="sex-right-btn">客户经理</view>
|
||||
<view class="sex-right-btn">客户经理</view>
|
||||
<view class="sex-right-btn">客户经理</view>
|
||||
<view class="sex-right-btn">客户经理</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
|
||||
<button class="nextstep" @tap="complate">完成</button>
|
||||
<button class="nextstep confirmStep">完成</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
@@ -139,8 +176,30 @@ import tabcontrolVue from './components/tabcontrol.vue';
|
||||
import { reactive, inject, watch, ref } from 'vue';
|
||||
const { statusBarHeight } = inject('deviceInfo');
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
const tabCurrent = ref(4);
|
||||
// 初始化
|
||||
const station = [
|
||||
{ label: '销售/商务拓展', value: 1 },
|
||||
{ label: '人事/行政/财务/法务', value: 2 },
|
||||
{ label: '互联网/通信及硬件', value: 3 },
|
||||
{ label: '运维/测试', value: 4 },
|
||||
{ label: '销售/商务拓展', value: 5 },
|
||||
{ label: '人事/行政/财务/法务', value: 6 },
|
||||
{ label: '互联网/通信及硬件', value: 7 },
|
||||
{ label: '运维/测试', value: 8 },
|
||||
{ label: '销售/商务拓展', value: 9 },
|
||||
{ label: '人事/行政/财务/法务', value: 10 },
|
||||
{ label: '互联网/通信及硬件', value: 11 },
|
||||
{ label: '销售/商务拓展', value: 12 },
|
||||
{ label: '人事/行政/财务/法务', value: 13 },
|
||||
{ label: '互联网/通信及硬件', value: 14 },
|
||||
];
|
||||
// status
|
||||
const tabCurrent = ref(0);
|
||||
const state = reactive({
|
||||
station: station,
|
||||
stationCateLog: 1,
|
||||
});
|
||||
const fromValue = reactive({
|
||||
sex: 1,
|
||||
});
|
||||
|
||||
@@ -150,7 +209,10 @@ setTimeout(() => {
|
||||
const getuserinfo = (e) => {
|
||||
console.log(e);
|
||||
};
|
||||
|
||||
// 行为
|
||||
function changeStationLog(item) {
|
||||
state.stationCateLog = item.value;
|
||||
}
|
||||
function nextStep() {
|
||||
tabCurrent.value += 1;
|
||||
}
|
||||
@@ -161,11 +223,11 @@ function handleScroll(event) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
width: 100%;
|
||||
height: 100%
|
||||
background: linear-gradient(#4778EC, #002979);
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
position: relative;
|
||||
|
||||
.login-content
|
||||
@@ -207,6 +269,8 @@ function handleScroll(event) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: calc(100% - 40rpx);
|
||||
.tabtwo-top
|
||||
margin: 222rpx 0 0 0;
|
||||
width: 100%;
|
||||
@@ -264,10 +328,6 @@ function handleScroll(event) {
|
||||
background: #13C57C;
|
||||
color: #FFFFFF;
|
||||
.nextstep
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0)
|
||||
width: 630rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 20rpx;
|
||||
@@ -276,6 +336,9 @@ function handleScroll(event) {
|
||||
line-height: 98rpx;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 150rpx;
|
||||
.confirmStep
|
||||
margin-bottom: 50rpx;
|
||||
.eduction-content
|
||||
width: fit-content;
|
||||
display: grid;
|
||||
@@ -297,7 +360,7 @@ function handleScroll(event) {
|
||||
.salary
|
||||
width: fit-content;
|
||||
display: grid;
|
||||
grid-template-columns: 300rpx auto 300rpx;
|
||||
grid-template-columns: 300rpx 40rpx 300rpx;
|
||||
// grid-gap: 20rpx;
|
||||
margin-top: 50rpx;
|
||||
.center-text
|
||||
@@ -314,4 +377,80 @@ function handleScroll(event) {
|
||||
border-radius: 20rpx;
|
||||
background: #d9d9d9;
|
||||
text-align: center;
|
||||
font-size: 38rpx;
|
||||
.salary-content-item-selected
|
||||
margin: 10rpx 5rpx 10rpx 5rpx;
|
||||
background: #13C57C;
|
||||
color: #FFFFFF;
|
||||
.sex-two
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background: #4678ec;
|
||||
.sex-search
|
||||
width: calc(100% - 28rpx - 28rpx);
|
||||
padding: 10rpx 28rpx;
|
||||
display: grid;
|
||||
// grid-template-columns: 50rpx auto;
|
||||
position: relative;
|
||||
.iconsearch
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
top: 20rpx;
|
||||
.searchinput
|
||||
border-radius: 10rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 10rpx 0 10rpx 58rpx;
|
||||
.sex-content
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #D9D9D9;
|
||||
overflow: hidden
|
||||
.sex-content-left
|
||||
width: 250rpx;
|
||||
.left-list-btn
|
||||
padding: 0 24rpx;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
color: #606060;
|
||||
font-size: 28rpx;
|
||||
.left-list-btned
|
||||
color: #4778EC;
|
||||
position: relative;
|
||||
.left-list-btned::after
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
content: '';
|
||||
width: 7rpx;
|
||||
height: 38rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
|
||||
.sex-content-right
|
||||
border-left: 2px solid #D9D9D9;
|
||||
flex: 1;
|
||||
.grid-sex
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
place-items: center;
|
||||
.sex-right-btn
|
||||
width: 211rpx;
|
||||
height: 84rpx;
|
||||
font-size: 35rpx;
|
||||
line-height: 41rpx;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #D9D9D9;
|
||||
border-radius: 20rpx;
|
||||
margin-top:30rpx;
|
||||
color: #606060;
|
||||
.sex-right-btned
|
||||
color: #FFFFFF;
|
||||
background: #4778EC;
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,158 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="app-container">
|
||||
<view class="mine-AI">AI+就业服务程序</view>
|
||||
<view class="mine-userinfo">
|
||||
<view class="userindo-head">
|
||||
<image class="userindo-head-img" src="/static/icon/flame2.png"></image>
|
||||
</view>
|
||||
<view class="userinfo-ls">
|
||||
<view class="userinfo-ls-name">用户名</view>
|
||||
<view class="userinfo-ls-resume">简历完成度80%，建议优化</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mine-tab">
|
||||
<view class="tab-item" @click="navTo('/packageA/pages/myResume/myResume')">
|
||||
<image class="item-img" src="/static/icon/resume.png"></image>
|
||||
<view class="item-text">我的简历</view>
|
||||
</view>
|
||||
<view class="tab-item">
|
||||
<image class="item-img" src="/static/icon/collect.png"></image>
|
||||
<view class="item-text">我的收藏</view>
|
||||
</view>
|
||||
<view class="tab-item">
|
||||
<image class="item-img" src="/static/icon/browse.png"></image>
|
||||
<view class="item-text">我的浏览</view>
|
||||
</view>
|
||||
<view class="tab-item">
|
||||
<image class="item-img" src="/static/icon/quaters.png"></image>
|
||||
<view class="item-text">意向岗位</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mine-options">
|
||||
<view class="mine-options-item">实名认证</view>
|
||||
<view class="mine-options-item">素质测评</view>
|
||||
<view class="mine-options-item">AI面试</view>
|
||||
<view class="mine-options-item">账号与安全</view>
|
||||
<view class="mine-options-item">通知与提醒</view>
|
||||
<view class="mine-logout">退出登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import useUserStore from '../../stores/useUserStore';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.app-container
|
||||
width: 100%;
|
||||
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mine-AI
|
||||
height: 42rpx;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 35rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 41rpx;
|
||||
padding: 85rpx 0 0 30rpx;
|
||||
.mine-userinfo
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 64rpx;
|
||||
.userindo-head
|
||||
width: 101rpx;
|
||||
height: 101rpx;
|
||||
background: #D9D9D9;
|
||||
border-radius: 50%
|
||||
overflow: hidden
|
||||
margin-right: 40rpx;
|
||||
.userindo-head-img
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.userinfo-ls
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.userinfo-ls-name
|
||||
font-size: 42rpx;
|
||||
color: #FFFFFF;
|
||||
.userinfo-ls-resume
|
||||
font-size: 21rpx;
|
||||
color: #D9D9D9;
|
||||
.mine-tab
|
||||
margin: 0 30rpx;
|
||||
height: calc(155rpx - 30rpx);
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
display: flex;
|
||||
padding: 15rpx;
|
||||
.tab-item
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% / 4);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.item-img
|
||||
height: 55rpx;
|
||||
width: 50rpx;
|
||||
.item-text
|
||||
font-size: 21rpx;
|
||||
color: #000000;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
.tab-item::after
|
||||
position: absolute;
|
||||
right: 0;
|
||||
content: '';
|
||||
width: 0rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
border-right: 2rpx solid #4778EC;
|
||||
.tab-item:last-child::after
|
||||
border-right: 0;
|
||||
.tab-item:nth-child(2)>.item-img
|
||||
width: 51rpx;
|
||||
height: 45rpx;
|
||||
.tab-item:nth-child(3)>.item-img
|
||||
width: 62rpx;
|
||||
height: 41rpx;
|
||||
.tab-item:nth-child(4)>.item-img
|
||||
width: 45rpx;
|
||||
height: 47rpx;
|
||||
.mine-options
|
||||
margin: 43rpx 30rpx;
|
||||
min-height: 155rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
display: flex;
|
||||
padding: 24rpx 45rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: min-content;
|
||||
.mine-options-item
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
line-height: 80rpx;
|
||||
border-bottom: 2rpx solid #4778EC;
|
||||
padding: 0 30rpx;
|
||||
.mine-logout
|
||||
margin: 250rpx auto 0 auto;
|
||||
width: 399rpx;
|
||||
height: 96rpx;
|
||||
background: #FFAD47;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
text-align: center;
|
||||
line-height: 96rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 35rpx;
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,131 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="app-container">
|
||||
<view class="msg-AI">AI+就业服务程序</view>
|
||||
<view class="msg-tab">
|
||||
<view class="msg-tab-item" :class="{ actived: state.current === 0 }" @click="seemsg(0)">全部</view>
|
||||
<view class="msg-tab-item" :class="{ actived: state.current === 1 }" @click="seemsg(1)">未读</view>
|
||||
</view>
|
||||
<view class="msg-list">
|
||||
<swiper class="swiper" :current="state.current" @change="changeSwiperMsgType">
|
||||
<swiper-item class="list">
|
||||
<view class="list-card">
|
||||
<view class="card-img">
|
||||
<image class="card-img-flame" src="/static/icon/flame2.png"></image>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="info-title">今日推荐</view>
|
||||
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
|
||||
</view>
|
||||
<view class="card-time">刚才</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="list">
|
||||
<view class="list-card">
|
||||
<view class="card-img">
|
||||
<image class="card-img-flame" src="/static/icon/flame2.png"></image>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="info-title">今日推荐</view>
|
||||
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
|
||||
</view>
|
||||
<view class="card-time">刚才</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const state = reactive({
|
||||
current: 0,
|
||||
all: [{}],
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
onLoad(() => {});
|
||||
|
||||
// 查看消息类型
|
||||
function changeSwiperMsgType(e) {
|
||||
const currented = e.detail.current;
|
||||
state.current = currented;
|
||||
}
|
||||
function seemsg(index) {
|
||||
state.current = index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="stylus" scoped>
|
||||
.app-container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.msg-AI
|
||||
height: 42rpx;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 35rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 41rpx;
|
||||
padding: 85rpx 0 0 30rpx;
|
||||
.msg-tab
|
||||
padding: 85rpx 0 0 30rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #D9D9D9;
|
||||
.msg-tab-item
|
||||
margin-right: 40rpx;
|
||||
.actived
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 7px 7px rgba(0,0,0,0.25);
|
||||
.msg-list
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.swiper
|
||||
height: 100%;
|
||||
.list
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.list-card
|
||||
height: calc(119rpx - 26rpx - 26rpx);
|
||||
width: calc(100% - 36rpx - 36rpx - 23rpx - 23rpx);
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 26rpx 36rpx;
|
||||
margin: 36rpx 23rpx;
|
||||
.card-img
|
||||
width: 63rpx;
|
||||
height: 63rpx;
|
||||
background: #D9D9D9;
|
||||
border-radius: 50%
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-right: 30rpx;
|
||||
.card-img-flame
|
||||
width: 36rpx;
|
||||
height: 44rpx;
|
||||
.card-info
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
.info-title
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
.info-text
|
||||
font-size: 17rpx;
|
||||
color: #606060;
|
||||
.card-time
|
||||
font-size: 17rpx;
|
||||
color: #606060;
|
||||
</style>
|
||||
|
||||
182
pages/nearby/components/four.vue
Normal file
182
pages/nearby/components/four.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="nearby-scroll">
|
||||
<view class="two-head">
|
||||
<view class="head-item active">市北区</view>
|
||||
<view class="head-item" v-for="(item, index) in 10" :key="index">中山路商圈</view>
|
||||
</view>
|
||||
<view class="nearby-list">
|
||||
<view class="list-head" @touchmove.stop.prevent>
|
||||
<view class="tab-options">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="tab-op-left">
|
||||
<view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
|
||||
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="tab-op-right">
|
||||
<view class="tab-recommend">推荐</view>
|
||||
<view class="tab-filter">
|
||||
<view class="tab-number">1000+</view>
|
||||
<image class="image" src="/static/icon/filter.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="one-cards">
|
||||
<view class="card-box" v-for="(item, index) in 20" :key="index">
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-left">销售工程师-高级销售经理</view>
|
||||
<view class="row-right">1万-2万</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left">
|
||||
<view class="row-tag">本科</view>
|
||||
<view class="row-tag">1-5年</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-item mineText">2024.1.8</view>
|
||||
<view class="row-item mineText">8人</view>
|
||||
<view class="row-item mineText textblue">匹配度93%</view>
|
||||
<view class="row-item">
|
||||
<uni-icons type="star" size="28"></uni-icons>
|
||||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left mineText">湖南沃森电气科技有限公司</view>
|
||||
<view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
const state = reactive({});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.nearby-scroll
|
||||
overflow: hidden;
|
||||
.two-head
|
||||
margin: 24rpx;
|
||||
padding: 26rpx;
|
||||
background: #FFFFFF;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 40rpx;
|
||||
grid-row-gap: 30rpx;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
.head-item
|
||||
min-width: 129rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
background: #D9D9D9;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
.active
|
||||
background: #4778EC;
|
||||
color: #FFFFFF;
|
||||
.nearby-list
|
||||
margin-top: 40rpx;
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
.list-head
|
||||
height: 77rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
top: -17rpx;
|
||||
z-index: 9999;
|
||||
.tab-options
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 77rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
padding: 0 24rpx;
|
||||
overflow: hidden;
|
||||
.tab-scroll
|
||||
height: 77rpx;
|
||||
line-height: 77rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-right: 10rpx;
|
||||
.tab-op-left
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.tab-list
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606060;
|
||||
.tab-op-right
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tab-recommend
|
||||
white-space: nowrap;
|
||||
width: 92rpx;
|
||||
height: 42rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 21rpx;
|
||||
line-height: 42rpx;
|
||||
margin-right: 12rpx;
|
||||
.tab-number
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
.tab-filter
|
||||
display: flex;
|
||||
.image
|
||||
width: 28rpx;
|
||||
height: 27rpx;
|
||||
|
||||
.one-cards
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
.card-box
|
||||
width: calc(100% - 36rpx - 36rpx);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx;
|
||||
padding: 15rpx 36rpx;
|
||||
margin-top: 24rpx;
|
||||
.box-row
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8rpx;
|
||||
align-items: center;
|
||||
.mineText
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
.textblue
|
||||
color: #4778EC;
|
||||
.row-left
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.row-tag
|
||||
background: #13C57C;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
font-size: 21rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
padding: 4rpx 8rpx;
|
||||
margin-right: 23rpx;
|
||||
.card-box:first-child
|
||||
margin-top: -14rpx;
|
||||
</style>
|
||||
222
pages/nearby/components/one.vue
Normal file
222
pages/nearby/components/one.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="nearby-scroll">
|
||||
<view class="nearby-map" @touchmove.stop.prevent>
|
||||
<zhuo-tianditu-MultiPoint-Mapper
|
||||
ref="tMap"
|
||||
:showLabel="false"
|
||||
:showCirle="true"
|
||||
api-key="e122b0518f43b32dcc256edbae20a5d1"
|
||||
@onLoad="LoadComplite"
|
||||
></zhuo-tianditu-MultiPoint-Mapper>
|
||||
</view>
|
||||
<view class="nearby-list">
|
||||
<view class="list-head" @touchmove.stop.prevent>
|
||||
<view class="tab-options">
|
||||
<view class="tab-scroll" ref="progress">
|
||||
<view class="tab-scr-d" :style="`width: ${state.progressWidth}`">
|
||||
<view class="">1km</view>
|
||||
<view class="">5km</view>
|
||||
<view class="">10km</view>
|
||||
</view>
|
||||
<bingProgressComponent
|
||||
strokeWidth="7px"
|
||||
:max="10"
|
||||
activeColor="#13C57C"
|
||||
handleWidth="10px"
|
||||
handleHeight="10px"
|
||||
handleBorderRadius="5px"
|
||||
handleColor="#4778EC"
|
||||
@change="progressChange"
|
||||
:showInfo="false"
|
||||
:width="state.progressWidth"
|
||||
></bingProgressComponent>
|
||||
</view>
|
||||
<view class="tab-op-right">
|
||||
<view class="tab-recommend">推荐</view>
|
||||
<view class="tab-filter">
|
||||
<view class="tab-number">1000+</view>
|
||||
<image class="image" src="/static/icon/filter.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="one-cards">
|
||||
<view class="card-box" v-for="(item, index) in 20" :key="index">
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-left">销售工程师-高级销售经理</view>
|
||||
<view class="row-right">1万-2万</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left">
|
||||
<view class="row-tag">本科</view>
|
||||
<view class="row-tag">1-5年</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-item mineText">2024.1.8</view>
|
||||
<view class="row-item mineText">8人</view>
|
||||
<view class="row-item mineText textblue">匹配度93%</view>
|
||||
<view class="row-item">
|
||||
<uni-icons type="star" size="28"></uni-icons>
|
||||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left mineText">湖南沃森电气科技有限公司</view>
|
||||
<view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import bingProgressComponent from '/components/bing-progress/bing-progress.vue';
|
||||
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
const tMap = ref();
|
||||
const progress = ref();
|
||||
const state = reactive({
|
||||
progressWidth: '150px',
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('.tab-scroll')
|
||||
.boundingClientRect((data) => {
|
||||
state.progressWidth = data.width - 50 + 'px';
|
||||
})
|
||||
.exec();
|
||||
tMap.value.open(104.397894, 31.126855);
|
||||
});
|
||||
|
||||
// 初始化
|
||||
function LoadComplite() {
|
||||
console.log('天地图加载完成');
|
||||
const list = [
|
||||
{
|
||||
id: 0,
|
||||
label: '',
|
||||
lat: 31.126855,
|
||||
lon: 104.397894,
|
||||
},
|
||||
];
|
||||
tMap.value.addFeature(list);
|
||||
}
|
||||
function progressChange(e) {
|
||||
tMap.value.changeRange(e.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.nearby-scroll
|
||||
overflow: hidden;
|
||||
.nearby-map
|
||||
height: 467rpx;
|
||||
background: #e8e8e8;
|
||||
.nearby-list
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
.list-head
|
||||
height: 77rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
top: -17rpx;
|
||||
z-index: 9999;
|
||||
.tab-options
|
||||
margin-top: -15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 77rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
padding: 0 24rpx;
|
||||
overflow: hidden;
|
||||
.tab-scroll
|
||||
height: 77rpx;
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
.tab-scr-d
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #000000;
|
||||
.tab-op-left
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.tab-list
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606060;
|
||||
.tab-op-right
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tab-recommend
|
||||
white-space: nowrap;
|
||||
width: 92rpx;
|
||||
height: 42rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 21rpx;
|
||||
line-height: 42rpx;
|
||||
margin-right: 12rpx;
|
||||
.tab-number
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
.tab-filter
|
||||
display: flex;
|
||||
.image
|
||||
width: 28rpx;
|
||||
height: 27rpx;
|
||||
|
||||
.one-cards
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
.card-box
|
||||
width: calc(100% - 36rpx - 36rpx);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx;
|
||||
padding: 15rpx 36rpx;
|
||||
margin-top: 24rpx;
|
||||
.box-row
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8rpx;
|
||||
align-items: center;
|
||||
.mineText
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
.textblue
|
||||
color: #4778EC;
|
||||
.row-left
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.row-tag
|
||||
background: #13C57C;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
font-size: 21rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
padding: 4rpx 8rpx;
|
||||
margin-right: 23rpx;
|
||||
.card-box:first-child
|
||||
margin-top: 6rpx;
|
||||
</style>
|
||||
248
pages/nearby/components/three.vue
Normal file
248
pages/nearby/components/three.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="nearby-scroll">
|
||||
<view class="three-head" @touchmove.stop.prevent>
|
||||
<scroll-view class="scroll-head" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="metro">
|
||||
<view class="metro-one">1号线</view>
|
||||
<view class="metro-two">王家港-东郭庄</view>
|
||||
<view class="metro-three">
|
||||
<view class="three-background">
|
||||
<view class="three-items">
|
||||
<view class="three-item">
|
||||
<view class="item-dont dontstart"></view>
|
||||
<view class="item-text">王家港</view>
|
||||
</view>
|
||||
<view class="three-item" v-for="(item, index) in 20" :key="index">
|
||||
<view class="item-dont"></view>
|
||||
<view class="item-text">王家港</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="nearby-list">
|
||||
<view class="list-head" @touchmove.stop.prevent>
|
||||
<view class="tab-options">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="tab-op-left">
|
||||
<view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
|
||||
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="tab-op-right">
|
||||
<view class="tab-recommend">推荐</view>
|
||||
<view class="tab-filter">
|
||||
<view class="tab-number">1000+</view>
|
||||
<image class="image" src="/static/icon/filter.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="one-cards">
|
||||
<view class="card-box" v-for="(item, index) in 20" :key="index">
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-left">销售工程师-高级销售经理</view>
|
||||
<view class="row-right">1万-2万</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left">
|
||||
<view class="row-tag">本科</view>
|
||||
<view class="row-tag">1-5年</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-item mineText">2024.1.8</view>
|
||||
<view class="row-item mineText">8人</view>
|
||||
<view class="row-item mineText textblue">匹配度93%</view>
|
||||
<view class="row-item">
|
||||
<uni-icons type="star" size="28"></uni-icons>
|
||||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left mineText">湖南沃森电气科技有限公司</view>
|
||||
<view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
const state = reactive({});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.nearby-scroll
|
||||
overflow: hidden;
|
||||
.three-head
|
||||
margin: 24rpx;
|
||||
padding: 26rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
.scroll-head
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.metro
|
||||
width: 100%;
|
||||
.metro-one
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
line-height: 33rpx;
|
||||
.metro-two
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
margin-top: 6rpx;
|
||||
.metro-three
|
||||
width: fit-content;
|
||||
margin-top: 26rpx;
|
||||
.three-background
|
||||
position: relative;
|
||||
.three-items
|
||||
position: relative;
|
||||
top: -17rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 2;
|
||||
.three-item
|
||||
margin-right: 70rpx;
|
||||
.item-dont
|
||||
width: 17rpx;
|
||||
height: 17rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-bottom: 10rpx;
|
||||
.dontstart::after
|
||||
position: absolute;
|
||||
content: '始';
|
||||
color: #FFFFFF;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
top: -5rpx;
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
line-height: 28rpx;
|
||||
background: blue;
|
||||
border-radius: 50%;
|
||||
.item-text
|
||||
width: 23rpx;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
.three-item:last-child
|
||||
margin-right: 0;
|
||||
.three-background::after
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: -17rpx;
|
||||
width: 100%;
|
||||
height: 17rpx;
|
||||
background: #FFCB47;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
z-index: 1;
|
||||
.nearby-list
|
||||
margin-top: 40rpx;
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
.list-head
|
||||
height: 77rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
top: -17rpx;
|
||||
z-index: 9999;
|
||||
.tab-options
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 77rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
padding: 0 24rpx;
|
||||
overflow: hidden;
|
||||
.tab-scroll
|
||||
height: 77rpx;
|
||||
line-height: 77rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-right: 10rpx;
|
||||
.tab-op-left
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.tab-list
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606060;
|
||||
.tab-op-right
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tab-recommend
|
||||
white-space: nowrap;
|
||||
width: 92rpx;
|
||||
height: 42rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 21rpx;
|
||||
line-height: 42rpx;
|
||||
margin-right: 12rpx;
|
||||
.tab-number
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
.tab-filter
|
||||
display: flex;
|
||||
.image
|
||||
width: 28rpx;
|
||||
height: 27rpx;
|
||||
|
||||
.one-cards
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
.card-box
|
||||
width: calc(100% - 36rpx - 36rpx);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx;
|
||||
padding: 15rpx 36rpx;
|
||||
margin-top: 24rpx;
|
||||
.box-row
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8rpx;
|
||||
align-items: center;
|
||||
.mineText
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
.textblue
|
||||
color: #4778EC;
|
||||
.row-left
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.row-tag
|
||||
background: #13C57C;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
font-size: 21rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
padding: 4rpx 8rpx;
|
||||
margin-right: 23rpx;
|
||||
.card-box:first-child
|
||||
margin-top: -14rpx;
|
||||
</style>
|
||||
190
pages/nearby/components/two.vue
Normal file
190
pages/nearby/components/two.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="nearby-scroll">
|
||||
<view class="two-head">
|
||||
<view class="head-item active">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
<view class="head-item">市北区</view>
|
||||
</view>
|
||||
<view class="nearby-list">
|
||||
<view class="list-head" @touchmove.stop.prevent>
|
||||
<view class="tab-options">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="tab-op-left">
|
||||
<view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
|
||||
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="tab-op-right">
|
||||
<view class="tab-recommend">推荐</view>
|
||||
<view class="tab-filter">
|
||||
<view class="tab-number">1000+</view>
|
||||
<image class="image" src="/static/icon/filter.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="one-cards">
|
||||
<view class="card-box" v-for="(item, index) in 20" :key="index">
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-left">销售工程师-高级销售经理</view>
|
||||
<view class="row-right">1万-2万</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left">
|
||||
<view class="row-tag">本科</view>
|
||||
<view class="row-tag">1-5年</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row mar_top0">
|
||||
<view class="row-item mineText">2024.1.8</view>
|
||||
<view class="row-item mineText">8人</view>
|
||||
<view class="row-item mineText textblue">匹配度93%</view>
|
||||
<view class="row-item">
|
||||
<uni-icons type="star" size="28"></uni-icons>
|
||||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-row">
|
||||
<view class="row-left mineText">湖南沃森电气科技有限公司</view>
|
||||
<view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
const state = reactive({});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.nearby-scroll
|
||||
overflow: hidden;
|
||||
.two-head
|
||||
margin: 24rpx;
|
||||
padding: 26rpx;
|
||||
background: #FFFFFF;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 40rpx;
|
||||
grid-row-gap: 30rpx;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
.head-item
|
||||
min-width: 129rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
background: #D9D9D9;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
.active
|
||||
background: #4778EC;
|
||||
color: #FFFFFF;
|
||||
.nearby-list
|
||||
margin-top: 40rpx;
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
.list-head
|
||||
height: 77rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
top: -17rpx;
|
||||
z-index: 9999;
|
||||
.tab-options
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 77rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
||||
padding: 0 24rpx;
|
||||
overflow: hidden;
|
||||
.tab-scroll
|
||||
height: 77rpx;
|
||||
line-height: 77rpx;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-right: 10rpx;
|
||||
.tab-op-left
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
.tab-list
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606060;
|
||||
.tab-op-right
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tab-recommend
|
||||
white-space: nowrap;
|
||||
width: 92rpx;
|
||||
height: 42rpx;
|
||||
background: #4778EC;
|
||||
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 21rpx;
|
||||
line-height: 42rpx;
|
||||
margin-right: 12rpx;
|
||||
.tab-number
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
.tab-filter
|
||||
display: flex;
|
||||
.image
|
||||
width: 28rpx;
|
||||
height: 27rpx;
|
||||
|
||||
.one-cards
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
.card-box
|
||||
width: calc(100% - 36rpx - 36rpx);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17rpx;
|
||||
padding: 15rpx 36rpx;
|
||||
margin-top: 24rpx;
|
||||
.box-row
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8rpx;
|
||||
align-items: center;
|
||||
.mineText
|
||||
font-weight: 400;
|
||||
font-size: 21rpx;
|
||||
color: #606060;
|
||||
.textblue
|
||||
color: #4778EC;
|
||||
.row-left
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.row-tag
|
||||
background: #13C57C;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
font-size: 21rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 25rpx;
|
||||
text-align: center;
|
||||
padding: 4rpx 8rpx;
|
||||
margin-right: 23rpx;
|
||||
.card-box:first-child
|
||||
margin-top: -14rpx;
|
||||
</style>
|
||||
84
pages/nearby/nearby.vue
Normal file
84
pages/nearby/nearby.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<view class="nearby-head">
|
||||
<view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
|
||||
<view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
|
||||
<view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
|
||||
<view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
|
||||
</view>
|
||||
<view class="nearby-content">
|
||||
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
|
||||
<swiper-item class="swiper-item" disable-touch>
|
||||
<oneComponent></oneComponent>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<twoComponent></twoComponent>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<threeComponent></threeComponent>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<fourComponent></fourComponent>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import oneComponent from './components/one.vue';
|
||||
import twoComponent from './components/two.vue';
|
||||
import threeComponent from './components/three.vue';
|
||||
import fourComponent from './components/four.vue';
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const state = reactive({
|
||||
current: 2,
|
||||
all: [{}],
|
||||
});
|
||||
|
||||
onLoad(() => {});
|
||||
|
||||
// 查看消息类型
|
||||
function changeSwiperType(e) {
|
||||
const currented = e.detail.current;
|
||||
state.current = currented;
|
||||
}
|
||||
function changeType(index) {
|
||||
state.current = index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.app-container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.nearby-head
|
||||
height: 63rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 63rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.head-item
|
||||
width: calc(100% / 4);
|
||||
z-index: 9
|
||||
.actived
|
||||
width: 169rpx;
|
||||
height: 63rpx;
|
||||
background: #13C57C;
|
||||
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
.nearby-content
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.swiper
|
||||
height: 100%;
|
||||
.swiper-item
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
</style>
|
||||
BIN
static/.DS_Store
vendored
Normal file
BIN
static/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
static/icon/bell.png
Normal file
BIN
static/icon/bell.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 B |
BIN
static/icon/browse.png
Normal file
BIN
static/icon/browse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 581 B |
BIN
static/icon/chat4ed.png
Normal file
BIN
static/icon/chat4ed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 597 B |
BIN
static/icon/collect.png
Normal file
BIN
static/icon/collect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
BIN
static/icon/edit.png
Normal file
BIN
static/icon/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
BIN
static/icon/filter.png
Normal file
BIN
static/icon/filter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 347 B |
BIN
static/icon/flame.png
Normal file
BIN
static/icon/flame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 791 B |
BIN
static/icon/flame2.png
Normal file
BIN
static/icon/flame2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 B |
BIN
static/icon/peopled.png
Normal file
BIN
static/icon/peopled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 807 B |
BIN
static/icon/quaters.png
Normal file
BIN
static/icon/quaters.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
BIN
static/icon/resume.png
Normal file
BIN
static/icon/resume.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 B |
BIN
static/tabbar/.DS_Store
vendored
Normal file
BIN
static/tabbar/.DS_Store
vendored
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 412 B After Width: | Height: | Size: 509 B |
Binary file not shown.
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 2.1 KiB |
BIN
static/tabbar/chat4ed.png
Normal file
BIN
static/tabbar/chat4ed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
static/tabbar/logo2.png
Normal file
BIN
static/tabbar/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/tabbar/mined.png
Normal file
BIN
static/tabbar/mined.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 509 B After Width: | Height: | Size: 412 B |
Binary file not shown.
|
Before Width: | Height: | Size: 456 B After Width: | Height: | Size: 1.2 KiB |
17
uni_modules/custom-waterfalls-flow/changelog.md
Normal file
17
uni_modules/custom-waterfalls-flow/changelog.md
Normal file
@@ -0,0 +1,17 @@
|
||||
## 1.0.7（2022-05-26）
|
||||
1. 优化局部改变数据更新问题，避免重新加载数据，只改变局部
|
||||
## 1.0.6（2022-04-18）
|
||||
1. 修改tab快速切换时会出现的BUG
|
||||
## 1.0.5（2022-04-18）
|
||||
1. 修复可能存在数据错误的BUG；
|
||||
2. 兼容，今后可以无需调用refresh()就可以更新数据；
|
||||
## 1.0.4（2022-04-18）
|
||||
1. 修复BUG；
|
||||
## 1.0.3（2022-04-15）
|
||||
1. 优化代码；
|
||||
2. 修改懒加载数据存在的BUG；
|
||||
## 1.0.1（2022-03-11）
|
||||
1. 增加隐藏图片字段的键名字段hideImageKey，默认hide
|
||||
2. 支持在列表中配置hide参数进行隐藏图片
|
||||
## 1.0.0（2022-03-09）
|
||||
使用最简单的思想实现瀑布流
|
||||
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<view class="waterfalls-flow">
|
||||
<view
|
||||
v-for="(item, index) in data.column"
|
||||
:key="index"
|
||||
class="waterfalls-flow-column"
|
||||
:id="`waterfalls_flow_column_${index + 1}`"
|
||||
:msg="msg"
|
||||
:style="{ width: w, 'margin-left': index == 0 ? 0 : m }"
|
||||
>
|
||||
<view
|
||||
:class="['column-value', { 'column-value-show': item2.o }]"
|
||||
v-for="(item2, index2) in columnValue(index)"
|
||||
:key="index2"
|
||||
:style="[s1]"
|
||||
@click.stop="wapperClick(item2)"
|
||||
>
|
||||
<view class="inner" v-if="data.seat == 1">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
<slot name="slot{{item2.index}}"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<slot :name="`slot${item2.index}`"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<image
|
||||
:class="[
|
||||
'img',
|
||||
{ 'img-hide': item2[hideImageKey] == true || item2[hideImageKey] == 1 },
|
||||
{ 'img-error': !item2[data.imageKey] },
|
||||
]"
|
||||
:src="item2[data.imageKey]"
|
||||
mode="widthFix"
|
||||
@load="imgLoad(item2, index + 1)"
|
||||
@error="imgError(item2, index + 1)"
|
||||
@click.stop="imageClick(item2)"
|
||||
></image>
|
||||
<view class="inner" v-if="data.seat == 2">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
<slot name="slot{{item2.index}}"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<slot :name="`slot${item2.index}`"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Array,
|
||||
column: {
|
||||
// 列的数量
|
||||
type: [String, Number],
|
||||
default: 2,
|
||||
},
|
||||
maxColumn: {
|
||||
// 最大列数
|
||||
type: [String, Number],
|
||||
default: 5,
|
||||
},
|
||||
columnSpace: {
|
||||
// 列之间的间距 百分比
|
||||
type: [String, Number],
|
||||
default: 2,
|
||||
},
|
||||
imageKey: {
|
||||
// 图片key
|
||||
type: [String],
|
||||
default: 'image',
|
||||
},
|
||||
hideImageKey: {
|
||||
// 隐藏图片key
|
||||
type: [String],
|
||||
default: 'hide',
|
||||
},
|
||||
seat: {
|
||||
// 文本的位置，1图片之上 2图片之下
|
||||
type: [String, Number],
|
||||
default: 2,
|
||||
},
|
||||
listStyle: {
|
||||
// 单个展示项的样式：eg:{'background':'red'}
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
list: this.value ? this.value : [],
|
||||
column: this.column < 2 ? 2 : this.column,
|
||||
columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
|
||||
imageKey: this.imageKey,
|
||||
seat: this.seat,
|
||||
},
|
||||
msg: 0,
|
||||
listInitStyle: {
|
||||
'border-radius': '12rpx',
|
||||
'margin-bottom': '20rpx',
|
||||
'background-color': '#fff',
|
||||
},
|
||||
adds: [], //预置数据
|
||||
isLoaded: true,
|
||||
curIndex: 0,
|
||||
isRefresh: true,
|
||||
flag: false,
|
||||
refreshDatas: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算列宽
|
||||
w() {
|
||||
const column_rate = `${100 / this.data.column - +this.data.columnSpace}%`;
|
||||
return column_rate;
|
||||
},
|
||||
// 计算margin
|
||||
m() {
|
||||
const column_margin = `${
|
||||
(100 - (100 / this.data.column - +this.data.columnSpace).toFixed(5) * this.data.column) /
|
||||
(this.data.column - 1)
|
||||
}%`;
|
||||
return column_margin;
|
||||
},
|
||||
// list样式
|
||||
s1() {
|
||||
return { ...this.listInitStyle, ...this.listStyle };
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 初始化
|
||||
this.refresh();
|
||||
},
|
||||
methods: {
|
||||
// 预加载图片
|
||||
loadImages(idx = 0) {
|
||||
let count = 0;
|
||||
const newList = this.data.list.filter((item, index) => index >= idx);
|
||||
for (let i = 0; i < newList.length; i++) {
|
||||
// #ifndef APP-PLUS
|
||||
uni.getImageInfo({
|
||||
src: `${newList[i][this.imageKey]}.jpg`,
|
||||
complete: (res) => {
|
||||
count++;
|
||||
if (count == newList.length) this.initValue(idx);
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.io.getImageInfo({
|
||||
src: `${newList[i][this.imageKey]}.jpg`,
|
||||
complete: (res) => {
|
||||
count++;
|
||||
if (count == newList.length) this.initValue(idx);
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
if (!this.isLoaded) {
|
||||
this.refreshDatas = this.value;
|
||||
return false;
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.refreshDatas = [];
|
||||
this.isRefresh = true;
|
||||
this.adds = [];
|
||||
this.data.list = this.value ? this.value : [];
|
||||
this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
|
||||
this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
|
||||
this.data.imageKey = this.imageKey;
|
||||
this.data.seat = this.seat;
|
||||
this.curIndex = 0;
|
||||
// 每列的数据初始化
|
||||
for (let i = 1; i <= this.data.column; i++) {
|
||||
this.data[`column_${i}_values`] = [];
|
||||
this.msg++;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'refresh==>');
|
||||
});
|
||||
}, 1);
|
||||
},
|
||||
columnValue(index) {
|
||||
return this.data[`column_${index + 1}_values`];
|
||||
},
|
||||
change(newValue) {
|
||||
for (let i = 0; i < this.data.list.length; i++) {
|
||||
const cv = this.data[`column_${this.data.list[i].column}_values`];
|
||||
for (let j = 0; j < cv.length; j++) {
|
||||
if (newValue[i] && i === cv[j].index) {
|
||||
this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
|
||||
this.msg++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getMin(a, s) {
|
||||
let m = a[0][s];
|
||||
let mo = a[0];
|
||||
for (var i = a.length - 1; i >= 0; i--) {
|
||||
if (a[i][s] < m) {
|
||||
m = a[i][s];
|
||||
}
|
||||
}
|
||||
mo = a.filter((i) => i[s] == m);
|
||||
return mo[0];
|
||||
},
|
||||
// 计算每列的高度
|
||||
getMinColumnHeight() {
|
||||
return new Promise((resolve) => {
|
||||
const heightArr = [];
|
||||
for (let i = 1; i <= this.data.column; i++) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(`#waterfalls_flow_column_${i}`)
|
||||
.boundingClientRect((data) => {
|
||||
heightArr.push({ column: i, height: data.height });
|
||||
})
|
||||
.exec(() => {
|
||||
if (this.data.column <= heightArr.length) {
|
||||
resolve(this.getMin(heightArr, 'height'));
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async initValue(i, from) {
|
||||
this.isLoaded = false;
|
||||
if (i >= this.data.list.length || this.refreshDatas.length) {
|
||||
this.msg++;
|
||||
this.loaded();
|
||||
return false;
|
||||
}
|
||||
const minHeightRes = await this.getMinColumnHeight();
|
||||
const c = this.data[`column_${minHeightRes.column}_values`];
|
||||
this.data.list[i].column = minHeightRes.column;
|
||||
c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
|
||||
this.msg++;
|
||||
},
|
||||
// 图片加载完成
|
||||
imgLoad(item, c) {
|
||||
const i = item.index;
|
||||
item.o = 1;
|
||||
this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
||||
this.initValue(i + 1);
|
||||
},
|
||||
// 图片加载失败
|
||||
imgError(item, c) {
|
||||
const i = item.index;
|
||||
item.o = 1;
|
||||
item[this.data.imageKey] = null;
|
||||
this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
||||
this.initValue(i + 1);
|
||||
},
|
||||
// 渲染结束
|
||||
loaded() {
|
||||
if (this.refreshDatas.length) {
|
||||
this.isLoaded = true;
|
||||
this.refresh();
|
||||
return false;
|
||||
}
|
||||
this.curIndex = this.data.list.length;
|
||||
if (this.adds.length) {
|
||||
this.data.list = this.adds[0];
|
||||
this.adds.splice(0, 1);
|
||||
this.initValue(this.curIndex);
|
||||
} else {
|
||||
if (this.data.list.length) this.$emit('loaded');
|
||||
this.isLoaded = true;
|
||||
this.isRefresh = false;
|
||||
}
|
||||
},
|
||||
// 单项点击事件
|
||||
wapperClick(item) {
|
||||
this.$emit('wapperClick', item);
|
||||
},
|
||||
// 图片点击事件
|
||||
imageClick(item) {
|
||||
this.$emit('imageClick', item);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
handler(newValue, oldValue) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.isRefresh) return false;
|
||||
if (this.isLoaded) {
|
||||
// if (newValue.length <= this.curIndex) return this.refresh();
|
||||
if (newValue.length <= this.curIndex) return this.change(newValue);
|
||||
this.data.list = newValue;
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'watch==>');
|
||||
});
|
||||
} else {
|
||||
this.adds.push(newValue);
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
},
|
||||
},
|
||||
column(newValue) {
|
||||
this.refresh();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.waterfalls-flow {
|
||||
overflow: hidden;
|
||||
|
||||
&-column {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.column-value {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.4s;
|
||||
opacity: 0;
|
||||
|
||||
&-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inner {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
|
||||
&-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background: #f2f2f2
|
||||
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC)
|
||||
no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
uni_modules/custom-waterfalls-flow/package.json
Normal file
80
uni_modules/custom-waterfalls-flow/package.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "custom-waterfalls-flow",
|
||||
"displayName": "瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "瀑布流，根据内容自动计算进行流式布局，简单参数配置，实现兼容多端及vue2和vue3的瀑布流布局；uv-ui发布https://ext.dcloud.net.cn/plugin?name=uv-ui",
|
||||
"keywords": [
|
||||
"瀑布流",
|
||||
"瀑布流式布局"
|
||||
],
|
||||
"repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "y",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
445
uni_modules/custom-waterfalls-flow/readme.md
Normal file
445
uni_modules/custom-waterfalls-flow/readme.md
Normal file
@@ -0,0 +1,445 @@
|
||||
- <a href="#c1" title="概要">概要</a>
|
||||
- <a href="#c2" title="支持的平台">支持的平台</a>
|
||||
- <a href="#c3" title="使用方式">使用方式</a>
|
||||
- <a href="#c4" title="属性说明">属性说明</a>
|
||||
- <a href="#c5" title="事件说明">事件说明</a>
|
||||
- <a href="#c6" title="组件方法">组件方法</a>
|
||||
- <a href="#c7" title="refresh的使用示例">refresh的使用示例</a>
|
||||
- <a href="#c8" title="隐藏单项图片示例">隐藏单项图片示例</a>
|
||||
- <a href="#c9" title="完整示例">完整示例</a>
|
||||
- <a href="#c10" title="温馨提示">温馨提示</a>
|
||||
- <a href="#c11" title="关注我，不迷路">关注我，不迷路</a>
|
||||
- <a href="#c12" title="个人作品展示">个人作品展示</a>
|
||||
|
||||
<div id="c1"></div>
|
||||
|
||||
#### 概要
|
||||
|
||||
custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。
|
||||
|
||||
最近在做项目的时候需要用到瀑布流，于是在插件市场找了一些，下载量最高的是用了定位来做的，我认为瀑布流可以不用定位去实现，于是我就自己写了该插件。经过反复的测试优化，最终搞定！
|
||||
|
||||
**设置列数：** 瀑布流的列数可以通过参数直接控制，实时监听，随改随生效。列数最小为2，最大默认为5，可以通过maxColumn参数去控制最大列数，理论上可以设置无限大，具体值自己拿捏。
|
||||
|
||||
**更新数据：** 瀑布流的每项数据，可以直接通过修改value，随改随生效，这样可以实现加载更多数据。已经渲染过的数据不会再次渲染，每次只会渲染新增的数据，这样避免了数据越多渲染越慢的情况。可以调用组件的```refresh()```方法进行数据刷新，注意vue2和vue3中调用子组件的方法有区别，也会在下面进行说明。
|
||||
|
||||
**展示方式：** 瀑布流可以是纯图片，可以使用插槽自定义文字描述，微信小程序与app、h5使用会有些区别，也会在下面具体说明。内容高度及排序都不用担心，会根据每项的内容高度自动计算。
|
||||
|
||||
**实现思路：** 通过配置列数，先渲染出每列，再计算每列的高度，最小的那列就加入一条数据进行渲染，然后再重复计算每列，高度小的加入数据...其实思路是很简单的。
|
||||
|
||||
uniapp插件市场地址：[https://ext.dcloud.net.cn/plugin?id=7594](https://ext.dcloud.net.cn/plugin?id=7594)
|
||||
|
||||
<div id="c2"></div>
|
||||
|
||||
#### 支持的平台
|
||||
|
||||
H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。
|
||||
|
||||
百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。
|
||||
|
||||
其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。
|
||||
|
||||
nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。
|
||||
|
||||
<div id="c3"></div>
|
||||
|
||||
#### 使用方式
|
||||
|
||||
**1、导入插件**
|
||||
|
||||
该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。
|
||||
|
||||
**2、template中使用**
|
||||
|
||||
uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。
|
||||
|
||||
***纯图片瀑布流使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list"></custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***微信小程序自定义内容使用***
|
||||
|
||||
微信小程序没有动态模板，使用for循环的方式进行渲染。
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***h5、app端自定义内容使用***
|
||||
|
||||
使用作用域插槽实现
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***小程序、h5、app等多端自定义内容使用***
|
||||
|
||||
条件渲染-多端同时兼容
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
<div id="c4"></div>
|
||||
|
||||
#### 属性说明
|
||||
|
||||
参数|说明|类型|是否必填|可选值|默认值
|
||||
-|-|-|-|-|-|
|
||||
value|渲染的列表|Array|是|-|-
|
||||
column|列数|Number|否|2-maxColumn|2
|
||||
maxColumn|最大列数|Number|否|>2|5
|
||||
columnSpace|列之间的间距（单位是百分比）|Number|否|-|2
|
||||
imageKey|列表中的图片字段的键名|String|否|-|image
|
||||
hideImageKey|隐藏图片字段的键名|String|否|-|hide
|
||||
seat|自定义文字的位置,1-图片上方，2-图片下方|Number|否|1/2|2
|
||||
listStyle|单个展示项的样式|Object|否|示例：```{'background':'red'}```|-
|
||||
|
||||
<div id="c5"></div>
|
||||
|
||||
#### 事件说明
|
||||
|
||||
事件名称|说明|回调参数
|
||||
-|-|-|
|
||||
@loaded|图片加载完成事件|-
|
||||
@wapperClick|单项点击事件|单项对应参数
|
||||
@imageClick|图片点击事件|单项对应参数
|
||||
|
||||
<div id="c6"></div>
|
||||
|
||||
#### 组件方法
|
||||
|
||||
事件名称|说明|参数|使用场景
|
||||
-|-|-|-
|
||||
refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等
|
||||
|
||||
<div id="c7"></div>
|
||||
|
||||
#### refresh的使用示例
|
||||
|
||||
***vue2中使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data:{
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
reset(){
|
||||
this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
this.$refs.waterfallsFlowRef.refresh();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***vue3中使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
const data = reactive({
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
});
|
||||
const waterfallsFlowRef = ref(null);
|
||||
function reset(){
|
||||
data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<div id="c8"></div>
|
||||
|
||||
#### 隐藏单项图片示例
|
||||
|
||||
在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
const data = reactive({
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000',
|
||||
hide:1,title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<div id="c9"></div>
|
||||
|
||||
#### 完整示例
|
||||
|
||||
```
|
||||
<template>
|
||||
<view style="padding: 0 10rpx;">
|
||||
<view class="handle">
|
||||
<button class="btn" type="default" @click="add()">增加数据</button>
|
||||
<button class="btn" type="default" @click="changeColumn(1)">+列数({{column}})</button>
|
||||
<button class="btn" type="default" @click="changeColumn(0)">-列数({{column}})</button>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
</view>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
// #ifdef VUE3
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
const data = reactive({
|
||||
list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
|
||||
{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
|
||||
{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
|
||||
{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
|
||||
{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
|
||||
{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
|
||||
});
|
||||
const column = ref(3);
|
||||
|
||||
function add() {
|
||||
const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' },
|
||||
{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' },
|
||||
{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }];
|
||||
data.list = data.list.concat(newArr);
|
||||
}
|
||||
|
||||
function changeColumn(h) {
|
||||
column.value = !h ? column.value - 1 : column.value + 1;
|
||||
}
|
||||
|
||||
function loaded() {
|
||||
console.log('加载完成')
|
||||
}
|
||||
|
||||
function wapperClick(item) {
|
||||
console.log('单项点击事件', item)
|
||||
}
|
||||
|
||||
function imageClick(item) {
|
||||
console.log('图片点击事件', item)
|
||||
}
|
||||
const waterfallsFlowRef = ref(null);
|
||||
|
||||
function reset() {
|
||||
data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<script>
|
||||
// #ifdef VUE2
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
|
||||
{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
|
||||
{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
|
||||
{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
|
||||
{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
|
||||
{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
|
||||
},
|
||||
column: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' },
|
||||
{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' },
|
||||
{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
|
||||
this.data.list = this.data.list.concat(newArr);
|
||||
},
|
||||
changeColumn(h) {
|
||||
this.column = !h ? this.column - 1 : this.column + 1;
|
||||
},
|
||||
loaded() {
|
||||
console.log('加载完成')
|
||||
},
|
||||
wapperClick(item) {
|
||||
console.log('单项点击事件', item)
|
||||
},
|
||||
imageClick(item) {
|
||||
console.log('图片点击事件', item)
|
||||
},
|
||||
reset() {
|
||||
this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
this.$refs.waterfallsFlowRef.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f2f5f9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.handle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx;
|
||||
|
||||
.btn {
|
||||
margin: 20rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #2878FF;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10rpx 10rpx 20rpx;
|
||||
|
||||
.title {
|
||||
line-height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<div id="c10"></div>
|
||||
|
||||
#### 温馨提示
|
||||
|
||||
1、该插件反复测试过微信小程序、h5、app-vue三个端，vue2和vue3都兼容，其他端可能需要测试改进。
|
||||
|
||||
2、该插件的使用hbuilderx版本最好升级到较新版本，我开发的版本是hbuilderx3.3.11.20220209。
|
||||
|
||||
3、对此插件或相关问题有好的建议，可以直接在评论区进行讨论。
|
||||
|
||||
4、希望遇到问题不要喷，也不要骂人，其实这种心情我能理解，写该插件也不是一时半会就完成了的，所以希望互相理解。只要有问题，我会第一时间回复解决。
|
||||
|
||||
5、对此插件有任何问题的可以在下方留言，我会第一时间回复和解决问题。还可以加QQ群进行前端技术交流 568984539，加群备注‘地区-名字-技术类型’。
|
||||
|
||||
#### 最后我想说：认为该插件对你有帮助的，记得收藏、好评，这样可以帮助到更多人哟！
|
||||
|
||||
---
|
||||
|
||||
<div id="c11"></div>
|
||||
|
||||
#### 关注我，不迷路
|
||||
|
||||
如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
|
||||
|
||||
更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
|
||||
|
||||
<div id="c12"></div>
|
||||
|
||||
#### 个人作品展示
|
||||
|
||||
uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
|
||||
|
||||
关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】
|
||||
|
||||
|
||||
42
uni_modules/uni-icons/changelog.md
Normal file
42
uni_modules/uni-icons/changelog.md
Normal file
@@ -0,0 +1,42 @@
|
||||
## 2.0.10（2024-06-07）
|
||||
- 优化 uni-app x 中，size 属性的类型
|
||||
## 2.0.9（2024-01-12）
|
||||
fix: 修复图标大小默认值错误的问题
|
||||
## 2.0.8（2023-12-14）
|
||||
- 修复 项目未使用 ts 情况下，打包报错的bug
|
||||
## 2.0.7（2023-12-14）
|
||||
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
|
||||
## 2.0.6（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.5（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.4（2023-12-06）
|
||||
- 优化 uni-app x 下示例项目图标排序
|
||||
## 2.0.3（2023-12-06）
|
||||
- 修复 nvue下引入组件报错的bug
|
||||
## 2.0.2（2023-12-05）
|
||||
-优化 size 属性支持单位
|
||||
## 2.0.1（2023-12-05）
|
||||
- 新增 uni-app x 支持定义图标
|
||||
## 1.3.5（2022-01-24）
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4（2022-01-24）
|
||||
- 优化 size 支持其他单位
|
||||
## 1.3.3（2022-01-17）
|
||||
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
|
||||
## 1.3.2（2021-12-01）
|
||||
- 优化 示例可复制图标名称
|
||||
## 1.3.1（2021-11-23）
|
||||
- 优化 兼容旧组件 type 值
|
||||
## 1.3.0（2021-11-19）
|
||||
- 新增 更多图标
|
||||
- 优化 自定义图标使用方式
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
## 1.1.7（2021-11-08）
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.5（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<text class="uni-icons" :style="styleObj">
|
||||
<slot>{{unicode}}</slot>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData, IconsDataItem } from './uniicons_file'
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icon 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number,String} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: "uni-icons",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
unicode() : string {
|
||||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||
if (codes !== null) {
|
||||
return codes.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() : string {
|
||||
const size = this.size
|
||||
if (typeof size == 'string') {
|
||||
const reg = /^[0-9]*$/g
|
||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||
// return '' + this.size
|
||||
}
|
||||
return this.getFontSize(size as number)
|
||||
},
|
||||
styleObj() : UTSJSONObject {
|
||||
if (this.fontFamily !== '') {
|
||||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||
}
|
||||
return { color: this.color, fontSize: this.iconSize }
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
methods: {
|
||||
/**
|
||||
* 字体大小
|
||||
*/
|
||||
getFontSize(size : number) : string {
|
||||
return size + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: UniIconsFontFamily;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-family: UniIconsFontFamily;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||
<slot></slot>
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData } from './uniicons_file_vue.js';
|
||||
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||
}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('" + iconUrl + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icons 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: fontData
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find(v => v.font_class === this.type)
|
||||
if (code) {
|
||||
return code.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() {
|
||||
return getVal(this.size)
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== '') {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
|
||||
.uniui-wallet:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
|
||||
.uniui-settings-filled:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
|
||||
.uniui-auth-filled:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.uniui-shop-filled:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
|
||||
.uniui-staff-filled:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.uniui-vip-filled:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.uniui-plus-filled:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.uniui-folder-add-filled:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
|
||||
.uniui-color-filled:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
|
||||
.uniui-tune-filled:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.uniui-calendar-filled:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
|
||||
.uniui-notification-filled:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
|
||||
.uniui-wallet-filled:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.uniui-medal-filled:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.uniui-refreshempty:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.uniui-location-filled:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.uniui-person-filled:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.uniui-personadd-filled:before {
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
||||
.uniui-forward:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.uniui-arrow-right:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-left:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.uniui-eye-filled:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.uniui-eye-slash:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.uniui-eye-slash-filled:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
|
||||
.uniui-info-filled:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.uniui-reload:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
|
||||
.uniui-micoff-filled:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
|
||||
.uniui-map-pin-ellipse:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.uniui-map-pin:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.uniui-location:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
|
||||
.uniui-starhalf:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.uniui-star:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.uniui-star-filled:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
|
||||
.uniui-calendar:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
|
||||
.uniui-fire:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.uniui-medal:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.uniui-font:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.uniui-gift:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.uniui-link:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
|
||||
.uniui-notification:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.uniui-staff:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.uniui-vip:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
|
||||
.uniui-folder-add:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.uniui-tune:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.uniui-auth:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
|
||||
.uniui-person:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.uniui-email-filled:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.uniui-phone-filled:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.uniui-phone:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.uniui-email:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.uniui-personadd:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.uniui-chatboxes-filled:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.uniui-contact:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.uniui-chatbubble-filled:before {
|
||||
content: "\e694";
|
||||
}
|
||||
|
||||
.uniui-contact-filled:before {
|
||||
content: "\e695";
|
||||
}
|
||||
|
||||
.uniui-chatboxes:before {
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.uniui-chatbubble:before {
|
||||
content: "\e697";
|
||||
}
|
||||
|
||||
.uniui-upload-filled:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
|
||||
.uniui-upload:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.uniui-weixin:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.uniui-compose:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.uniui-qq:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.uniui-download-filled:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
.uniui-pyq:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.uniui-sound:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.uniui-trash-filled:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.uniui-sound-filled:before {
|
||||
content: "\e686";
|
||||
}
|
||||
|
||||
.uniui-trash:before {
|
||||
content: "\e687";
|
||||
}
|
||||
|
||||
.uniui-videocam-filled:before {
|
||||
content: "\e689";
|
||||
}
|
||||
|
||||
.uniui-spinner-cycle:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.uniui-weibo:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.uniui-videocam:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.uniui-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.uniui-help:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.uniui-navigate-filled:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.uniui-plusempty:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.uniui-smallcircle:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.uniui-minus-filled:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.uniui-micoff:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.uniui-closeempty:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.uniui-clear:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.uniui-navigate:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.uniui-minus:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.uniui-image:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.uniui-mic:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.uniui-paperplane:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.uniui-close:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.uniui-help-filled:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.uniui-paperplane-filled:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.uniui-plus:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.uniui-mic-filled:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.uniui-image-filled:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.uniui-locked-filled:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.uniui-info:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.uniui-locked:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.uniui-camera-filled:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.uniui-chat-filled:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.uniui-camera:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.uniui-circle:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.uniui-checkmarkempty:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.uniui-chat:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.uniui-circle-filled:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.uniui-flag:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.uniui-flag-filled:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.uniui-gear-filled:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.uniui-home:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.uniui-home-filled:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.uniui-gear:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.uniui-smallcircle-filled:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.uniui-map-filled:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.uniui-map:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.uniui-refresh-filled:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.uniui-refresh:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.uniui-cloud-download-filled:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.uniui-cloud-download:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload-filled:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.uniui-redo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.uniui-images-filled:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.uniui-undo-filled:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.uniui-more:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.uniui-more-filled:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.uniui-undo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.uniui-images:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.uniui-paperclip:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.uniui-settings:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.uniui-search:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.uniui-redo-filled:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.uniui-list:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.uniui-mail-open-filled:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.uniui-hand-down-filled:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.uniui-hand-down:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.uniui-hand-up-filled:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.uniui-hand-up:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.uniui-heart-filled:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.uniui-mail-open:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.uniui-heart:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.uniui-loop:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.uniui-pulldown:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.uniui-scan:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.uniui-bars:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.uniui-checkbox-filled:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.uniui-shop:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.uniui-headphones:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.uniui-cart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
Binary file not shown.
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
export type IconsData = {
|
||||
id : string
|
||||
name : string
|
||||
font_family : string
|
||||
css_prefix_text : string
|
||||
description : string
|
||||
glyphs : Array<IconsDataItem>
|
||||
}
|
||||
|
||||
export type IconsDataItem = {
|
||||
font_class : string
|
||||
unicode : string
|
||||
}
|
||||
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
] as IconsDataItem[]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
@@ -0,0 +1,649 @@
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
89
uni_modules/uni-icons/package.json
Normal file
89
uni_modules/uni-icons/package.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "2.0.10",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"icon",
|
||||
"图标"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.14"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-icons/readme.md
Normal file
8
uni_modules/uni-icons/readme.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## Icons 图标
|
||||
> **组件名：uni-icons**
|
||||
> 代码块： `uIcons`
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
8
uni_modules/uni-scss/changelog.md
Normal file
8
uni_modules/uni-scss/changelog.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## 1.0.3（2022-01-21）
|
||||
- 优化 组件示例
|
||||
## 1.0.2（2021-11-22）
|
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||
## 1.0.1（2021-11-22）
|
||||
- 修复 vue3中scss语法兼容问题
|
||||
## 1.0.0（2021-11-18）
|
||||
- init
|
||||
1
uni_modules/uni-scss/index.scss
Normal file
1
uni_modules/uni-scss/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './styles/index.scss';
|
||||
82
uni_modules/uni-scss/package.json
Normal file
82
uni_modules/uni-scss/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
uni_modules/uni-scss/readme.md
Normal file
4
uni_modules/uni-scss/readme.md
Normal file
@@ -0,0 +1,4 @@
|
||||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
7
uni_modules/uni-scss/styles/index.scss
Normal file
7
uni_modules/uni-scss/styles/index.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import './setting/_variables.scss';
|
||||
@import './setting/_border.scss';
|
||||
@import './setting/_color.scss';
|
||||
@import './setting/_space.scss';
|
||||
@import './setting/_radius.scss';
|
||||
@import './setting/_text.scss';
|
||||
@import './setting/_styles.scss';
|
||||
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
|
||||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
|
||||
// @mixin get-styles($k,$c) {
|
||||
// @if $k == size or $k == weight{
|
||||
// font-#{$k}:#{$c}
|
||||
// }@else{
|
||||
// #{$k}:#{$c}
|
||||
// }
|
||||
// }
|
||||
$uni-ui-color:(
|
||||
// 主色
|
||||
primary: $uni-primary,
|
||||
primary-disable: $uni-primary-disable,
|
||||
primary-light: $uni-primary-light,
|
||||
// 辅助色
|
||||
success: $uni-success,
|
||||
success-disable: $uni-success-disable,
|
||||
success-light: $uni-success-light,
|
||||
warning: $uni-warning,
|
||||
warning-disable: $uni-warning-disable,
|
||||
warning-light: $uni-warning-light,
|
||||
error: $uni-error,
|
||||
error-disable: $uni-error-disable,
|
||||
error-light: $uni-error-light,
|
||||
info: $uni-info,
|
||||
info-disable: $uni-info-disable,
|
||||
info-light: $uni-info-light,
|
||||
// 中性色
|
||||
main-color: $uni-main-color,
|
||||
base-color: $uni-base-color,
|
||||
secondary-color: $uni-secondary-color,
|
||||
extra-color: $uni-extra-color,
|
||||
// 背景色
|
||||
bg-color: $uni-bg-color,
|
||||
// 边框颜色
|
||||
border-1: $uni-border-1,
|
||||
border-2: $uni-border-2,
|
||||
border-3: $uni-border-3,
|
||||
border-4: $uni-border-4,
|
||||
// 黑色
|
||||
black:$uni-black,
|
||||
// 白色
|
||||
white:$uni-white,
|
||||
// 透明
|
||||
transparent:$uni-transparent
|
||||
) !default;
|
||||
@each $key, $child in $uni-ui-color {
|
||||
.uni-#{"" + $key} {
|
||||
color: $child;
|
||||
}
|
||||
.uni-#{"" + $key}-bg {
|
||||
background-color: $child;
|
||||
}
|
||||
}
|
||||
.uni-shadow-sm {
|
||||
box-shadow: $uni-shadow-sm;
|
||||
}
|
||||
.uni-shadow-base {
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
.uni-shadow-lg {
|
||||
box-shadow: $uni-shadow-lg;
|
||||
}
|
||||
.uni-mask {
|
||||
background-color:$uni-mask;
|
||||
}
|
||||
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@mixin radius($r,$d:null ,$important: false){
|
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||
// Key exists within the $uni-radius variable
|
||||
@if (map-has-key($uni-radius, $r) and $d){
|
||||
@if $d == t {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == r {
|
||||
border-top-right-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == b {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == l {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}@else if $d == tl {
|
||||
border-top-left-radius:$radius-value;
|
||||
}@else if $d == tr {
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == br {
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == bl {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}
|
||||
}@else{
|
||||
border-radius:$radius-value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $key} {
|
||||
@include radius($key)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius {
|
||||
@include radius($key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius-#{$direction} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
|
||||
@mixin fn($space,$direction,$size,$n) {
|
||||
@if $n {
|
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||
} @else {
|
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||
}
|
||||
}
|
||||
@mixin get-styles($direction,$i,$space,$n){
|
||||
@if $direction == t {
|
||||
@include fn($space, top,$i,$n);
|
||||
}
|
||||
@if $direction == r {
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == b {
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == l {
|
||||
@include fn($space, left,$i,$n);
|
||||
}
|
||||
@if $direction == x {
|
||||
@include fn($space, left,$i,$n);
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == y {
|
||||
@include fn($space, top,$i,$n);
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == a {
|
||||
@if $n {
|
||||
#{$space}:#{$i*$uni-space-root}px;
|
||||
} @else {
|
||||
#{$space}:#{-$i*$uni-space-root}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $orientation in m,p {
|
||||
$space: margin;
|
||||
@if $orientation == m {
|
||||
$space: margin;
|
||||
} @else {
|
||||
$space: padding;
|
||||
}
|
||||
@for $i from 0 through 16 {
|
||||
@each $direction in t, r, b, l, x, y, a {
|
||||
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||
@include get-styles($direction,$i,$space,true);
|
||||
}
|
||||
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||
@include get-styles($direction,$i,$space,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
@@ -0,0 +1,167 @@
|
||||
/* #ifndef APP-NVUE */
|
||||
|
||||
$-color-white:#fff;
|
||||
$-color-black:#000;
|
||||
@mixin base-style($color) {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: mix($-color-black, $color, 8%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-black, $color, 10%);
|
||||
border-color: mix($-color-black, $color, 20%);
|
||||
color: $-color-white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@mixin is-color($color) {
|
||||
@include base-style($color);
|
||||
&[loading] {
|
||||
@include base-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&[loading],
|
||||
&:not([hover-class]):active {
|
||||
color: $-color-white;
|
||||
border-color: mix(darken($color,10%), $-color-white);
|
||||
background-color: mix($color, $-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@mixin base-plain-style($color) {
|
||||
color:$color;
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 70%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-white, $color, 80%);
|
||||
color: $color;
|
||||
outline: none;
|
||||
border-color: mix($-color-white, $color, 50%);
|
||||
}
|
||||
}
|
||||
@mixin is-plain($color){
|
||||
&[plain] {
|
||||
@include base-plain-style($color);
|
||||
&[loading] {
|
||||
@include base-plain-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&:active {
|
||||
color: mix($-color-white, $color, 40%);
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-btn {
|
||||
margin: 5px;
|
||||
color: #393939;
|
||||
border:1px solid #ccc;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
background-color: #F9F9F9;
|
||||
// TODO 暂时处理边框隐藏一边的问题
|
||||
overflow: visible;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not([type]),&[type=default] {
|
||||
color: #999;
|
||||
&[loading] {
|
||||
background: none;
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[disabled]{
|
||||
color: mix($-color-white, #999, 60%);
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
color: mix($-color-white, #999, 60%);
|
||||
background-color: mix($-color-white,$-color-black , 98%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: #999;
|
||||
background: none;
|
||||
border-color: $uni-border-1;
|
||||
&:not([hover-class]):active {
|
||||
background: none;
|
||||
color: mix($-color-white, $-color-black, 80%);
|
||||
border-color: mix($-color-white, $-color-black, 90%);
|
||||
outline: none;
|
||||
}
|
||||
&[disabled]{
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
background: none;
|
||||
color: mix($-color-white, #999, 60%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([hover-class]):active {
|
||||
color: mix($-color-white, $-color-black, 50%);
|
||||
}
|
||||
|
||||
&[size=mini] {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.uni-btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.uni-btn-mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.uni-btn-radius {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&[type=primary] {
|
||||
@include is-color($uni-primary);
|
||||
@include is-plain($uni-primary)
|
||||
}
|
||||
&[type=success] {
|
||||
@include is-color($uni-success);
|
||||
@include is-plain($uni-success)
|
||||
}
|
||||
&[type=error] {
|
||||
@include is-color($uni-error);
|
||||
@include is-plain($uni-error)
|
||||
}
|
||||
&[type=warning] {
|
||||
@include is-color($uni-warning);
|
||||
@include is-plain($uni-warning)
|
||||
}
|
||||
&[type=info] {
|
||||
@include is-color($uni-info);
|
||||
@include is-plain($uni-info)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@mixin get-styles($k,$c) {
|
||||
@if $k == size or $k == weight{
|
||||
font-#{$k}:#{$c}
|
||||
}@else{
|
||||
#{$k}:#{$c}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-headings {
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.container .uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
// @use "sass:math";
|
||||
@import '../tools/functions.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2 !default;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px !default;
|
||||
$uni-radius: () !default;
|
||||
// 边框半径断点
|
||||
$uni-radius: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
// TODO 当前版本暂时不支持 sm 属性
|
||||
// 'sm': math.div($uni-radius-root, 2),
|
||||
null: $uni-radius-root,
|
||||
'lg': $uni-radius-root * 2,
|
||||
'xl': $uni-radius-root * 6,
|
||||
'pill': 9999px,
|
||||
'circle': 50%
|
||||
),
|
||||
$uni-radius
|
||||
);
|
||||
// 字体家族
|
||||
$body-font-family: 'Roboto', sans-serif !default;
|
||||
// 文本
|
||||
$heading-font-family: $body-font-family !default;
|
||||
$uni-headings: () !default;
|
||||
$letterSpacing: -0.01562em;
|
||||
$uni-headings: map-deep-merge(
|
||||
(
|
||||
'h1': (
|
||||
size: 32px,
|
||||
weight: 300,
|
||||
line-height: 50px,
|
||||
// letter-spacing:-0.01562em
|
||||
),
|
||||
'h2': (
|
||||
size: 28px,
|
||||
weight: 300,
|
||||
line-height: 40px,
|
||||
// letter-spacing: -0.00833em
|
||||
),
|
||||
'h3': (
|
||||
size: 24px,
|
||||
weight: 400,
|
||||
line-height: 32px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h4': (
|
||||
size: 20px,
|
||||
weight: 400,
|
||||
line-height: 30px,
|
||||
// letter-spacing: 0.00735em
|
||||
),
|
||||
'h5': (
|
||||
size: 16px,
|
||||
weight: 400,
|
||||
line-height: 24px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h6': (
|
||||
size: 14px,
|
||||
weight: 500,
|
||||
line-height: 18px,
|
||||
// letter-spacing: 0.0125em
|
||||
),
|
||||
'subtitle': (
|
||||
size: 12px,
|
||||
weight: 400,
|
||||
line-height: 20px,
|
||||
// letter-spacing: 0.00937em
|
||||
),
|
||||
'body': (
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
line-height: 22px,
|
||||
// letter-spacing: 0.03125em
|
||||
),
|
||||
'caption': (
|
||||
'size': 12px,
|
||||
'weight': 400,
|
||||
'line-height': 20px,
|
||||
// 'letter-spacing': 0.03333em,
|
||||
// 'text-transform': false
|
||||
)
|
||||
),
|
||||
$uni-headings
|
||||
);
|
||||
|
||||
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||
$uni-success-light: lighten($uni-success,25%) !default;
|
||||
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||
$uni-error-light: lighten($uni-error,25%) !default;
|
||||
|
||||
$uni-info: #8f939c !default;
|
||||
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||
$uni-info-light: lighten($uni-info,25%) !default;
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||
$uni-secondary-color: #909399 !default; // 次要文字
|
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0 !default;
|
||||
$uni-border-2: #EDEDED !default;
|
||||
$uni-border-3: #DCDCDC !default;
|
||||
$uni-border-4: #B9B9B9 !default;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000 !default;
|
||||
$uni-white: #ffffff !default;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7 !default;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px !default;
|
||||
$uni-spacing-base: 15px !default;
|
||||
$uni-spacing-lg: 30px !default;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// 合并 map
|
||||
@function map-deep-merge($parent-map, $child-map){
|
||||
$result: $parent-map;
|
||||
@each $key, $child in $child-map {
|
||||
$parent-has-key: map-has-key($result, $key);
|
||||
$parent-value: map-get($result, $key);
|
||||
$parent-type: type-of($parent-value);
|
||||
$child-type: type-of($child);
|
||||
$parent-is-map: $parent-type == map;
|
||||
$child-is-map: $child-type == map;
|
||||
|
||||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||
$result: map-merge($result, ( $key: $child ));
|
||||
}@else {
|
||||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
};
|
||||
31
uni_modules/uni-scss/theme.scss
Normal file
31
uni_modules/uni-scss/theme.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
// 辅助色
|
||||
$uni-success: #4cd964;
|
||||
// 警告色
|
||||
$uni-warning: #f0ad4e;
|
||||
// 错误色
|
||||
$uni-error: #dd524d;
|
||||
// 描述色
|
||||
$uni-info: #909399;
|
||||
// 中性色
|
||||
$uni-main-color: #303133;
|
||||
$uni-base-color: #606266;
|
||||
$uni-secondary-color: #909399;
|
||||
$uni-extra-color: #C0C4CC;
|
||||
// 背景色
|
||||
$uni-bg-color: #f5f5f5;
|
||||
// 边框颜色
|
||||
$uni-border-1: #DCDFE6;
|
||||
$uni-border-2: #E4E7ED;
|
||||
$uni-border-3: #EBEEF5;
|
||||
$uni-border-4: #F2F6FC;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
62
uni_modules/uni-scss/variables.scss
Normal file
62
uni_modules/uni-scss/variables.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@import './styles/setting/_variables.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||
$uni-success: #18bc37;
|
||||
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||
|
||||
$uni-warning: #f3a73f;
|
||||
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||
|
||||
$uni-error: #e43d33;
|
||||
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||
|
||||
$uni-info: #8f939c;
|
||||
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
$uni-main-color: #3a3a3a; // 主要文字
|
||||
$uni-base-color: #6a6a6a; // 常规文字
|
||||
$uni-secondary-color: #909399; // 次要文字
|
||||
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0;
|
||||
$uni-border-2: #EDEDED;
|
||||
$uni-border-3: #DCDCDC;
|
||||
$uni-border-4: #B9B9B9;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px;
|
||||
$uni-spacing-base: 15px;
|
||||
$uni-spacing-lg: 30px;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view style="width: 100%; height: 100%">
|
||||
<view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tools from '../../tools.js';
|
||||
import iconPath from '../../static/point2.png';
|
||||
import iconRangePath from '../../static/range.png';
|
||||
export default {
|
||||
name: 'TianDiTu-Map',
|
||||
data() {
|
||||
return {
|
||||
Tmap: null,
|
||||
option: {
|
||||
type: '',
|
||||
apikey: '',
|
||||
cover: null,
|
||||
lng: '',
|
||||
lat: '',
|
||||
png: iconPath,
|
||||
rangePng: iconRangePath,
|
||||
showLabel: true,
|
||||
showCirle: false,
|
||||
range: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
apiKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '',
|
||||
},
|
||||
customIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showLabel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showCirle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
compliteonLoadTianDiTu() {
|
||||
this.$emit('onLoadTianDiTu');
|
||||
},
|
||||
initCharts(lng, lat) {
|
||||
this.option = {
|
||||
...this.option,
|
||||
apikey: this.apiKey,
|
||||
showLabel: this.showLabel,
|
||||
showCirle: this.showCirle,
|
||||
lng,
|
||||
lat,
|
||||
png: this.customIcon || this.option.png,
|
||||
type: 'open',
|
||||
};
|
||||
},
|
||||
upDataCharts(lng, lat) {
|
||||
this.option = {
|
||||
...this.option,
|
||||
type: 'Icon',
|
||||
lng,
|
||||
lat,
|
||||
png: this.customIcon || this.option.png,
|
||||
type: 'update',
|
||||
showLabel: this.showLabel,
|
||||
};
|
||||
},
|
||||
addFeature(cover) {
|
||||
this.option = {
|
||||
...this.option,
|
||||
type: 'Icon',
|
||||
cover,
|
||||
png: this.customIcon || this.option.png,
|
||||
type: 'addFeature',
|
||||
showLabel: this.showLabel,
|
||||
};
|
||||
},
|
||||
changeRange(range) {
|
||||
this.option = {
|
||||
...this.option,
|
||||
type: 'Icon',
|
||||
png: this.customIcon || this.option.png,
|
||||
type: 'changeRange',
|
||||
showLabel: this.showLabel,
|
||||
showCirle: this.showCirle,
|
||||
range: range,
|
||||
};
|
||||
},
|
||||
selectItem(info) {
|
||||
this.$emit('onSelect', info);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script module="Trenderjs" lang="renderjs">
|
||||
var Tmap = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
circle: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
initTMap(newValue, oldValue, ownerInstance, instance) {
|
||||
this.options = newValue
|
||||
if (newValue.type === 'open' && newValue.apikey) {
|
||||
if (!window.T) {
|
||||
const script = document.createElement('script')
|
||||
script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.options.apikey
|
||||
script.onload = this.initChartsRender.bind(this)
|
||||
document.head.appendChild(script)
|
||||
console.log('open')
|
||||
} else {
|
||||
const {
|
||||
lng,
|
||||
lat
|
||||
} = this.options
|
||||
Tmap = null;
|
||||
Tmap = new T.Map('mapDiv', {
|
||||
projection: 'EPSG:4326',
|
||||
});
|
||||
const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
|
||||
const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
|
||||
Tmap.addControl(scale);
|
||||
Tmap.addControl(control);
|
||||
this.upDataChartsRender(lng, lat)
|
||||
this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
|
||||
}
|
||||
} else {
|
||||
const {
|
||||
lng,
|
||||
lat,
|
||||
cover,
|
||||
showLabel,
|
||||
showCirle,
|
||||
range
|
||||
} = newValue
|
||||
|
||||
switch (newValue.type) {
|
||||
case 'update':
|
||||
this.upDataChartsRender(lng, lat)
|
||||
break;
|
||||
case 'addFeature':
|
||||
Tmap.clearOverLays()
|
||||
this.circle = []
|
||||
cover.map((item, index) => {
|
||||
this.setIcon(item.lon, item.lat, false, showLabel, false, showCirle, item)
|
||||
})
|
||||
break;
|
||||
case 'changeRange':
|
||||
this.setRange(range)
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
initChartsRender() {
|
||||
this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
|
||||
const {
|
||||
lng,
|
||||
lat
|
||||
} = this.options
|
||||
var that = this;
|
||||
Tmap = new T.Map('mapDiv', {
|
||||
projection: 'EPSG:4326',
|
||||
});
|
||||
this.upDataChartsRender(lng, lat)
|
||||
const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
|
||||
const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
|
||||
Tmap.addControl(scale);
|
||||
Tmap.addControl(control);
|
||||
console.log('初始化1')
|
||||
},
|
||||
upDataChartsRender(lng, lat, zoom = 15) {
|
||||
if (!Tmap) return
|
||||
Tmap.centerAndZoom(new T.LngLat(lng, lat), zoom);
|
||||
},
|
||||
setRange(range) {
|
||||
for (let item in this.circle) {
|
||||
this.circle[item].setRadius(range * 1000)
|
||||
}
|
||||
// this.circle.setRadius(range * 1000)
|
||||
},
|
||||
setIcon(lng, lat, isClear, isClick = false, isLabel = false, isCirle = false, item) {
|
||||
if (isClear) {
|
||||
Tmap.clearOverLays()
|
||||
}
|
||||
const latlng = new T.LngLat(lng, lat)
|
||||
const icon = new T.Icon({
|
||||
iconUrl: this.options.png,
|
||||
iconSize: new T.Point(30, 30),
|
||||
iconAnchor: new T.Point(15, 30)
|
||||
});
|
||||
if (isLabel) {
|
||||
const label = new T.Label({
|
||||
text: `<div style="max-width: 50px; overflow: hidden">${item.label}</div>`,
|
||||
position: latlng,
|
||||
offset: new T.Point(-50, 0)
|
||||
});
|
||||
Tmap.addOverLay(label);
|
||||
}
|
||||
if(isCirle) {
|
||||
const circleObj = new T.Circle(latlng , parseFloat(50), {
|
||||
color:"#13C57C",weight:2,opacity:1,fillColor:"#13C57C",fillOpacity:0.24
|
||||
})
|
||||
this.circle.push(circleObj)
|
||||
Tmap.addOverLay(circleObj);
|
||||
}
|
||||
const marker = new T.Marker(latlng, {
|
||||
icon
|
||||
});
|
||||
|
||||
if (isClick) {
|
||||
this.removeMarkerClick(marker);
|
||||
//注册标注的点击事件
|
||||
marker.addEventListener("click", this.MarkerClick.bind(null, item));
|
||||
}
|
||||
Tmap.addOverLay(marker);
|
||||
},
|
||||
removeMarkerClick(marker) {
|
||||
//移除标注的点击事件
|
||||
marker.removeEventListener("click", this.MarkerClick);
|
||||
},
|
||||
MarkerClick(item, e) {
|
||||
this.openInfo(item.label, e)
|
||||
this.$ownerInstance.callMethod('selectItem', item)
|
||||
},
|
||||
openInfo(content, e) {
|
||||
const point = e.lnglat;
|
||||
const marker = new T.Marker(point); // 创建标注
|
||||
const markerInfoWin = new T.InfoWindow(content, {
|
||||
offset: new T.Point(0, -30)
|
||||
}); // 创建信息窗口对象
|
||||
Tmap.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#mapDiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/ .tdt-control-copyright {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .tdt-label {
|
||||
/* background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0; */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view style="width: 100%; height: 100%">
|
||||
<view class="mask" style="width: 100%; height: 100%">
|
||||
<tiandituMap
|
||||
ref="tiandituMapRefs"
|
||||
@onLoadTianDiTu="initMaps"
|
||||
@onSelect="selectPoint"
|
||||
:apiKey="apiKey"
|
||||
:customIcon="icon"
|
||||
:showLabel="showLabel"
|
||||
:showCirle="showCirle"
|
||||
></tiandituMap>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import tiandituMap from './tianditu-map.vue';
|
||||
import tools from '../../tools.js';
|
||||
export default {
|
||||
name: 'zhuozhuoTiandituPlugin',
|
||||
components: {
|
||||
tiandituMap,
|
||||
},
|
||||
props: {
|
||||
apiKey: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showLabel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showCirle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
winWidth: 0,
|
||||
winHeight: 0,
|
||||
winTop: 0,
|
||||
visible: false,
|
||||
datalist: [],
|
||||
selectItem: {},
|
||||
iStatusBarHeight: 0,
|
||||
option: {
|
||||
apikey: 123123,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
// #ifdef APP
|
||||
// 44 + 10 44: search Input height
|
||||
const searchHeight = this.search ? 54 : 10;
|
||||
const { statusBarHeight, screenHeight, windowHeight } = uni.getSystemInfoSync();
|
||||
if (screenHeight === windowHeight) {
|
||||
that.iStatusBarHeight = statusBarHeight + searchHeight;
|
||||
} else {
|
||||
that.iStatusBarHeight = 0;
|
||||
}
|
||||
// #endif
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
that.winWidth = res.windowWidth;
|
||||
that.winHeight = res.windowHeight;
|
||||
that.winTop = res.windowTop;
|
||||
},
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
open(lon, lat) {
|
||||
if (lon && lat) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tiandituMapRefs.initCharts(lon, lat);
|
||||
});
|
||||
} else {
|
||||
console.error('请传入lon, lat');
|
||||
}
|
||||
},
|
||||
upDateLonLat(cover) {
|
||||
if (lon && lat) {
|
||||
this.$refs.tiandituMapRefs.upDataCharts(lon && lat);
|
||||
} else {
|
||||
console.error('请传入lon, lat');
|
||||
}
|
||||
},
|
||||
addFeature(cover) {
|
||||
if (cover && Array.isArray(cover) && cover.length) {
|
||||
this.$refs.tiandituMapRefs.addFeature(cover);
|
||||
} else {
|
||||
console.error('请传入 cover', cover);
|
||||
}
|
||||
},
|
||||
changeRange(range) {
|
||||
this.$refs.tiandituMapRefs.changeRange(range);
|
||||
},
|
||||
selectPoint(e) {
|
||||
this.$emit('onSelect', e);
|
||||
},
|
||||
initMaps() {
|
||||
console.warn('--------天地图加载完成--------');
|
||||
this.$emit('onLoad');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.mask {
|
||||
/* overflow: hidden; */
|
||||
/* position: fixed;
|
||||
left: 0;
|
||||
z-index: 399; */
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
.list-boxd {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 401;
|
||||
right: 0;
|
||||
border-radius: 14px 14px 0 0;
|
||||
background: #ffffff;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
height: 20px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-header::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 60px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 44px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border-top: 2px solid #666666;
|
||||
border-right: 2px solid #666666;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.card:active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background-color: #e8e8e8;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.card:last-child::after {
|
||||
height: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: #e8e8e8;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
83
uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json
Normal file
83
uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "zhuo-tianditu-MultiPoint-Mapper",
|
||||
"displayName": "zhuo-tianditu-MultiPoint-Mapper",
|
||||
"version": "1.0.0",
|
||||
"description": "zhuo-tianditu-MultiPoint-Mapper",
|
||||
"keywords": [
|
||||
"zhuo-tianditu-MultiPoint-Mapper"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "",
|
||||
"data": "",
|
||||
"permissions": ""
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "u",
|
||||
"aliyun": "u",
|
||||
"alipay": "u"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "u",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md
Normal file
1
uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md
Normal file
@@ -0,0 +1 @@
|
||||
# zhuo-tianditu-MultiPoint-Mapper
|
||||
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png
Normal file
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 926 B |
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point2.png
Normal file
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 841 B |
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/range.png
Normal file
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/range.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
106
uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js
Normal file
106
uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* @param title String，提示的内容
|
||||
* @param duration String，提示的延迟时间，单位毫秒，默认：1500
|
||||
* @param mask Boolean，是否显示透明蒙层，防止触摸穿透，默认：false
|
||||
* @param icon String，图标：success、error、fail、exception、loading、none，默认：none
|
||||
**/
|
||||
export function createMessage(title, duration = 1500, mask = false, icon = "none") {
|
||||
uni.showToast({
|
||||
title,
|
||||
duration: duration,
|
||||
mask,
|
||||
icon
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param url String，请求的地址，默认：none
|
||||
* @param data Object，请求的参数，默认：{}
|
||||
* @param method String，请求的方式，默认：GET
|
||||
* @param loading Boolean，是否需要loading ，默认：false
|
||||
* @param header Object，headers，默认：{}
|
||||
* @returns promise
|
||||
**/
|
||||
export function createRequest(url, data = {}, loading = false, method = 'GET', header = {}) {
|
||||
if (loading) {
|
||||
uni.showLoading({
|
||||
title: '请稍后',
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: url,
|
||||
method: method,
|
||||
data: data,
|
||||
header: header,
|
||||
success: res => {
|
||||
if (res.statusCode === 200) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
if (res.data.msg) {
|
||||
const str = typeof res.data.resolve === 'string' ? ',' + res.data.resolve :
|
||||
''
|
||||
createMessage(res.data.msg + str)
|
||||
}
|
||||
throw new Error('请求错误 ' + url)
|
||||
reject()
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据格式化
|
||||
* @param obj Object，响应的数据
|
||||
* @param type Number 0 ｜ 1，处理类型
|
||||
* @returns Object {address = string, name = string, location = {lon, lat }, infomation = {}}
|
||||
*/
|
||||
export function formatterAdressLocation(obj, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return {
|
||||
address: obj.formatted_address,
|
||||
name: '',
|
||||
location: obj.location,
|
||||
infomation: obj.addressComponent
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
const [lon, lat] = obj.lonlat.split(',')
|
||||
return {
|
||||
address: obj.address,
|
||||
name: obj.name,
|
||||
location: {
|
||||
lon,
|
||||
lat
|
||||
},
|
||||
infomation: obj
|
||||
}
|
||||
break
|
||||
case 3:
|
||||
return {
|
||||
address: obj.location.keyWord,
|
||||
name: '',
|
||||
location: {
|
||||
lon: obj.location.lon,
|
||||
lat: obj.location.lat,
|
||||
},
|
||||
infomation: obj.location
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
export default {
|
||||
createMessage,
|
||||
createRequest,
|
||||
formatterAdressLocation
|
||||
}
|
||||
Reference in New Issue
Block a user