Commit 1508bb59 by 李耀琨

Initial commit

parents
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"type": "uniCloud",
"default": {
"launchtype": "local"
}
}
]
}
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@charset "utf-8";
/*测试*/
.testBorder {
border: 2rpx solid red;
}
/* flex操作 */
.k-flex {
display: flex
}
/* 占满 */
.k-all {
flex: 1
}
/* 水平排列 */
.k-row {
flex-direction: row
}
/* 垂直排列 */
.k-column {
flex-direction: column;
}
/* 右起水平排列 */
.k-row-reverse {
flex-direction: row-reverse;
}
/* 底部起垂直排列 */
.k-column-reverse {
flex-direction: column-reverse;
}
/* 换行 */
.k-wrap {
flex-wrap: wrap
}
/* 不换行 */
.k-nowrap {
flex-wrap: nowrap;
}
/* ===========对齐方式=========== */
/* 左对齐 */
.k-flex-start {
justify-content: flex-start
}
/* 右对齐 */
.k-flex-end {
justify-content: flex-end
}
/* 居中 */
.k-center {
justify-content: center
}
/* 对齐两端 */
.k-space-between {
justify-content: space-between
}
/* 各div间距相等 */
.k-space-around {
justify-content: space-around
}
/* 起点对齐方式 */
/*对齐起点*/
.k-align-start {
align-items: flex-start
}
/*对齐终点*/
.k-align-end {
align-items: flex-end
}
/*中点对齐*/
.k-align-center {
align-items: center
}
/*超集*/
/* 左右间隔为0并水平居中 */
.k-flex-between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 上下垂直居中左右间隔相等 */
.k-flex-around-center {
display: flex;
justify-content: space-around;
align-items: center;
}
/* 盒子阴影 */
.k-box-shadow {
box-shadow: 0rpx 0rpx 20rpx #9E9E9E;
}
/* 吸顶超集 */
.k-sticky {
position: sticky;
top: 0;
z-index: 9999;
}
/* fontSize */
.font-10 {
font-size: 10rpx
}
.font-12 {
font-size: 12rpx
}
.font-14 {
font-size: 14rpx
}
.font-16 {
font-size: 16rpx
}
.font-18 {
font-size: 18rpx
}
.font-20 {
font-size: 20rpx
}
.font-22 {
font-size: 22rpx
}
.font-24 {
font-size: 24rpx
}
.font-26 {
font-size: 26rpx
}
.font-28 {
font-size: 28rpx
}
.font-30 {
font-size: 30rpx
}
.font-32 {
font-size: 32rpx
}
.font-34 {
font-size: 34rpx
}
.font-26 {
font-size: 36rpx
}
.font-38 {
font-size: 38rpx
}
.font-40 {
font-size: 40rpx
}
.font-42 {
font-size: 42rpx
}
.font-44 {
font-size: 44rpx
}
.font-46 {
font-size: 46rpx
}
.font-48 {
font-size: 48rpx
}
.font-50 {
font-size: 50rpx
}
/* font-weight */
.font-weight-500 {
font-weight: 500
}
.font-weight-600 {
font-weight: 600
}
.font-weight-bold {
font-weight: bold
}
.font-weight-bold {
font-weight: bolder
}
/* 背景颜色 */
.bg-FFFFFF {
background-color: #FFFFFF
}
.bg-EEEEEE {
background-color: #EEEEEE
}
.bg-F5F5F5 {
background-color: #F5F5F5
}
/* 字体颜色 */
/* 常用字体黑色色阶向下 */
.color-black2 {
color: #222222
}
.color-black3 {
color: #333333
}
.color-black4 {
color: #444444
}
.color-black6 {
color: #666666
}
.color-black7 {
color: #777777
}
.color-black8 {
color: #888888
}
.color-black9 {
color: #999999
}
/* 常用字体颜色 */
.color-FFFFFF {
color: #FFFFFF
}
/*文字操作 */
/*居中*/
.text-center {
text-align: center
}
/*右对齐*/
.text-right {
text-align: right
}
/* 自定义颜色区域 样式名为 xx-base{} 可修改*/
.bg-base {}
/* 背景颜色(可修改)*/
.color-base {}
/* 字体颜色(可修改) */
</style>
<template>
<view class="easy-select" @click.stop="trigger" :style="[easySelectSize]">
<input type="text" v-model="value" :placeholder="placeholder" disabled clearable>
<view class="easy-select-suffix" :style="{border: '1px solid rgba(0,0,0,0)'}" :class="[showSuffix]">
<view class="easy-select-down-tag">^</view>
</view>
<view class="easy-select-options" v-if="showOptions" :style="{'min-width': boundingClientRect.width + 'px', top: optionsGroupTop, margin: optionsGroupMargin}">
<view class="easy-select-options-item" v-for="item in options" :key="item.value" @click.stop="select(item)" :class="{active: currentSelect.label === item.label}">
<text>{{item.label}}</text>
</view>
</view>
</view>
</template>
<script>
/**
* easy-select
* @author Snoop zhang
* @description Select Component
* */
const COMPONENT_NAME = 'easy-select'
const MAX_OPTIONS_HEIGHT = 137 // 修改务必也修改easy-select-options的css部分
const OPTIONS_ITEM_HEIGHT = 33 // 修改务必也修改easy-select-options-item的css部分
const OPTIONS_MARGIN = 10
const OPTIONS_PADDING = 6 * 2 + 2 // + 2是border
const OPTIONS_OTHER_HEIGHT = OPTIONS_MARGIN + OPTIONS_PADDING
const STORAGE_KEY = '_easyWindowHeight'
const SIZE = {
'medium': {
width: '280px',
height: '40px'
},
'small': {
width: '200px',
height: '30px'
},
'mini': {
width: '160px',
height: '30px'
}
}
export default {
name: COMPONENT_NAME,
props: {
windowHeight: {
type: [Number, String],
default: 0
},
placeholder: {
type: String,
default: '请选择'
},
value: {
type: String,
default: '南宁市'
},
size: {
type: String,
default: 'medium'
},
options: {
type: Array,
default () {
return [{
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: '选项13',
label: '北海市'
}]
}
}
},
data() {
return {
showOptions: false,
boundingClientRect: {},
currentSelect: {},
optionsGroupTop: 'auto',
optionsGroupMargin: ''
}
},
computed: {
showSuffix() {
return this.showOptions ? 'showOptions' : 'no-showOptions'
},
easySelectSize() {
let size = this.size.toLowerCase()
if (size in SIZE) {
return {
width: SIZE[size].width,
height: SIZE[size].height
}
} else {
return {}
}
}
},
mounted() {
const elQuery = uni.createSelectorQuery().in(this)
elQuery.select('.easy-select').boundingClientRect(data => {
this.boundingClientRect = data
}).exec();
try {
if (!this.windowHeight) {
const storageHeihgt = uni.getStorageSync(STORAGE_KEY)
if (storageHeihgt) {
this.easyWindowHeight = storageHeihgt
return
}
const res = uni.getSystemInfoSync();
this.easyWindowHeight = res.windowHeight
uni.setStorageSync(STORAGE_KEY, this.easyWindowHeight)
}
} catch (e) {
// error
}
},
methods: {
trigger(e) {
const view = uni.createSelectorQuery().in(this)
view.select('.easy-select').fields({rect: true}, data => {
let { top, bottom } = data
const thresholdHeight = Math.min(MAX_OPTIONS_HEIGHT + OPTIONS_MARGIN, (this.options.length * OPTIONS_ITEM_HEIGHT) +
OPTIONS_OTHER_HEIGHT)
bottom = Number(this.windowHeight || this.easyWindowHeight) - (top + this.boundingClientRect.height) // 距离底部的距离等于视口的高度减上top加select组件的高度
// judge direction
if (bottom < thresholdHeight) {
this.optionsGroupDirection = 'up'
this.optionsGroupTop = -thresholdHeight - 12 + 'px'
this.optionsGroupMargin = '0'
} else {
this.optionsGroupDirection = 'down'
this.optionsGroupTop = 'auto'
this.optionsGroupMargin = '10px 0 0 0'
}
// if (this.scrollTop < )
this.showOptions = !this.showOptions
}).exec();
},
select(options) {
this.showOptions = false
this.currentSelect = options
this.$emit('selectOne', options)
},
hideOptions() {
this.showOptions = false
}
}
}
</script>
<style scoped>
.easy-select {
position: relative;
/* border: 1px solid #dcdfe6; */
border-radius: 4px;
/* font-size: 28rpx; */
color: #606266;
outline: none;
box-sizing: content-box;
height: 30px;
}
.easy-select input {
padding: 0 18rpx;
padding-right: 60rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 100% !important;
min-height: 100% !important;
}
.easy-select .easy-select-suffix {
position: absolute;
box-sizing: border-box;
height: 100%;
right: 5px;
top: 0;
display: flex;
align-items: center;
transform: rotate(180deg);
transition: all .3s;
transform-origin: center;
}
.easy-select .showOptions {
transform: rotate(0) !important;
}
.easy-select .no-showOptions {
transform: rotate(180deg) !important;
}
.easy-select .easy-select-options {
position: absolute;
padding: 6px 0;
margin-top: 10px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
box-sizing: border-box;
transform-origin: center top;
z-index: 2238;
overflow: scroll;
max-height: 274rpx;
}
.easy-select .easy-select-options-item {
padding: 0 20rpx;
position: relative;
white-space: nowrap;
font-size: 14px;
color: #606266;
height: 33px;
line-height: 33px;
box-sizing: border-box;
}
.easy-select .active {
background-color: #F5F7FA
}
</style>
<template>
<view class="t-table" :style="{ 'border-width': border + 'px', 'border-color': borderColor }">
<slot />
</view>
</template>
<script>
export default {
props: {
border: {
type: String,
default: '1'
},
borderColor: {
type: String,
default: '#fff'
},
isCheck: {
type: Boolean,
default: false
}
},
provide() {
return {
table: this
};
},
data() {
return {};
},
created() {
this.childrens = [];
this.index = 0;
},
methods: {
fire(e, index, len) {
let childrens = this.childrens;
console.log(childrens);
// 全选
if (index === 0) {
childrens.map((vm, index) => {
vm.checkboxData.checked = e;
return vm;
});
} else {
let isAll = childrens.find((n, ids) => ids !== 0 && !n.checkboxData.checked);
childrens[0].checkboxData.checked = isAll ? false : true;
}
let fireArr = [];
for (let i = 0; i < childrens.length; i++) {
if (childrens[i].checkboxData.checked && i !== 0) {
fireArr.push(childrens[i].checkboxData.value - 1);
}
}
this.$emit('change', {
detail: fireArr
});
}
}
};
</script>
<style scoped>
.t-table {
width: 100%;
border: 1px #d0dee5 solid;
border-left: none;
border-top: none;
box-sizing: border-box;
}
.t-table>>>t-tr {
display: flex;
}
.t-table>>>t-tr:nth-child(2n) {
background: #283763;
}
/* #ifdef H5 */
.t-table>>>.t-tr:nth-child(2n) {
background: #283763;
}
/* #endif */
</style>
<template>
<view class="t-td" :style="{ 'border-width': thBorder + 'px','border-color':borderColor ,'font-size':fontSize+'px' ,'color':color,'justify-content':tdAlignCpd}">
<slot></slot>
</view>
</template>
<script>
export default {
props: {
align: String
},
data() {
return {
thBorder: '1',
borderColor: '#fff',
fontSize: '14',
color: '#fff',
tdAlign: 'center'
};
},
inject: ['table', 'tr'],
created() {
this.thBorder = this.table.border;
this.borderColor = this.table.borderColor;
this.fontSize = this.tr.fontSize;
this.color = this.tr.color;
if (this.align) {
this.tdAlign = this.align;
} else {
this.tdAlign = this.tr.align
}
},
computed: {
tdAlignCpd() {
let nameAlign = '';
switch (this.tdAlign) {
case 'left':
nameAlign = 'flex-start'
break;
case 'center':
nameAlign = 'center'
break;
case 'right':
nameAlign = 'flex-end'
break;
default:
nameAlign = 'center'
break;
}
return nameAlign
}
}
};
</script>
<style>
.t-td {
flex: 1;
display: flex;
align-items: center;
width: 100%;
padding: 14upx;
border-top: 1px #d0dee5 solid;
border-left: 1px #d0dee5 solid;
text-align: center;
color: #fff;
font-size: 28upx;
}
</style>
<template>
<view class="t-th" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor,'font-size':fontSize+'px' ,'color':color,'justify-content':thAlignCpd}">
<slot></slot>
</view>
</template>
<script>
export default {
props: {
align: String,
},
data() {
return {
thBorder: '1',
borderColor: '#fff',
fontSize: '15',
color: '#fff',
thAlign: 'center'
};
},
inject: ['table', 'tr'],
created() {
this.thBorder = this.table.border;
this.borderColor = this.table.borderColor;
this.fontSize = this.tr.fontSize;
this.color = this.tr.color;
if (this.align) {
this.thAlign = this.align;
} else {
this.thAlign = this.tr.align
}
},
computed: {
thAlignCpd() {
let nameAlign = '';
switch (this.thAlign) {
case 'left':
nameAlign = 'flex-start'
break;
case 'center':
nameAlign = 'center'
break;
case 'right':
nameAlign = 'flex-end'
break;
default:
nameAlign = 'center'
break;
}
return nameAlign
}
}
};
</script>
<style>
.t-th {
flex: 1;
display: flex;
align-items: center;
font-size: 30upx;
font-weight: bold;
text-align: center;
color: #3b4246;
border-left: 1px #d0dee5 solid;
border-top: 1px #d0dee5 solid;
padding: 15upx;
}
</style>
<template>
<view class="t-tr">
<view v-if="isCheck" class="t-check-box" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor}">
<checkbox-group @change="checkboxChange">
<checkbox :value="checkboxData.value + ''" :checked="checkboxData.checked" />
</checkbox-group>
</view>
<slot></slot>
</view>
</template>
<script>
export default {
props: {
fontSize: String,
color: String,
align: String
},
inject: ['table'],
provide() {
return {
tr: this
};
},
data() {
return {
isCheck: false,
checkboxData: {
value: 0,
checked: false
},
checked: false,
thBorder: '1',
borderColor: '#d0dee5'
};
},
created() {
this.thBorder = this.table.border;
this.borderColor = this.table.borderColor;
this.table.childrens.push(this);
this.checkboxData.value = this.table.index++;
this.isCheck = this.table.isCheck;
},
methods: {
checkboxChange(e) {
this.checkboxData.checked = !this.checkboxData.checked;
this.table.childrens[this.checkboxData.value] = this;
this.table.fire(e.detail.value[0] ? true : false, this.checkboxData.value, this.table.index);
}
}
};
</script>
<style>
.t-tr {
width: 100%;
display: flex;
}
.t-tr t-th,
.t-tr t-td {
display: flex;
flex: 1;
}
.t-tr .t-check-box {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80upx;
color: #3b4246;
border-left: 1px #d0dee5 solid;
border-top: 1px #d0dee5 solid;
}
.t-tr .t-check-box checkbox {
transform: scale(0.8);
}
</style>
<template>
<view class="switch-container" :style="[{ background: bj_color}]">
<view class="switch_view">
<view
class="switch-item"
:class="{'checked_switch':isSwitch}"
:style="isSwitch?`color:${checked_color}`:''"
@click.prevent.stop="changeSwitch(true)"
:animation="animationData2"
>
{{switchList[0]}}
</view>
<view
class="switch-item"
:class="{'checked_switch':!isSwitch}"
:style="!isSwitch?`color:${checked_color}`:''"
@click.prevent.stop="changeSwitch(false)"
:animation="animationData3"
>
{{switchList[1]}}
</view>
</view>
<view class="disabled" v-if="disabled"></view>
<view
class="position_view" :animation="animationData1"
:style="[{ background: checked_bj_color}]"
></view>
</view>
</template>
<script>
export default {
props: {
switchList: {
type: Array,
default: ()=>{
return ["地名","门牌"]
}
},
defaultSwitch:{
type:Boolean,
default:true
},
isShowModal:{//改变开关时,是否弹框提醒
type:Boolean,
default:false
},
disabled:{
type:Boolean,
default:false
},
bj_color:{
type:String,
default:'#fff',
},
checked_bj_color:{
type:String,
default:'#1989fa',
},
checked_color:{
type:String,
default:'#fff',
}
},
data () {
return {
isSwitch:true,
initAnimation:{},
animationData1: {},
animationData2: {},
animationData3: {}
}
},
created () {
this.initAnimation = uni.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.isSwitch = this.defaultSwitch
this.changeAnimation()
},
methods: {
changeSwitch(isSwitch) {
if(isSwitch == this.isSwitch || this.disabled){
return
}
if(this.isShowModal){
let index = isSwitch?0:1
let text = this.switchList[index]
uni.showModal({
title: '提示',
content: `您确定要将其调整为${text}吗?`,
success: (res) => {
if(res.confirm){
this.isSwitch = isSwitch
this.changeAnimation()
this.callParentEvent(isSwitch)
}
}
})
}else{
this.isSwitch = isSwitch
this.changeAnimation()
this.callParentEvent(isSwitch)
}
},
changeAnimation(){
if(this.isSwitch){
this.animationData1 = this.initAnimation.left(0).width('60%').step().export()
this.animationData2 = this.initAnimation.width('60%').step().export()
this.animationData3 = this.initAnimation.width('40%').step().export()
}else{
this.animationData1 = this.initAnimation.left('40%').width('60%').step().export()
this.animationData2 = this.initAnimation.width('40%').step().export()
this.animationData3 = this.initAnimation.width('60%').step().export()
}
},
callParentEvent(){
this.$emit("change",this.isSwitch)
}
}
}
</script>
<style lang="scss" scoped>
.switch-container {
display: flex;
flex-direction: row;
width: 180upx;
height: 60upx;
border-radius: 100upx;
border: 1upx solid #ccc;
position: relative;
.switch_view{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
border-radius: 100upx;
.switch-item {
color: #666;
font-size: 24upx;
height: 100%;
width: 40%;
border-radius: 100upx;
display: flex;
justify-content: center;
align-items: center;
}
}
.position_view{
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
border-radius: 100upx;
background: $uni-color-primary;
}
.disabled{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
background: #fff;
opacity: 0.6;
border-radius: 100upx;
}
}
</style>
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
{
"name" : "民政决策分析系统",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics": {
"enable": false
}
}
{
"id": "panda-swiperTab",
"name": "colorui滑动切换",
"version": "1.0.0",
"description": "基于colorui组件",
"keywords": [
"colorui,滑动切换"
]
}
\ No newline at end of file
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "",
"app-plus" : { "titleNView" : false}//去掉顶部导航栏
}
}, {
"path": "pages/signIn/index",
"style": {
"navigationBarTitleText": "",
"app-plus" : { "titleNView" : false}//去掉顶部导航栏
}
}, {
"path": "pages/homepage/homepage",
"style": {
"navigationBarTitleText": "广西省民政厅决策系统",
"enablePullDownRefresh": false
}
}, {
"path": "pages/verification/verification",
"style": {
"navigationBarTitleText": "验证码登录",
"enablePullDownRefresh": false
}
}, {
"path": "pages/retrieve/retrieve",
"style": {
"navigationBarTitleText": "找回密码",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/retrieve/change/change",
"style" :
{
"navigationBarTitleText": "找回密码",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/verification/verifyLogin/verifyLogin",
"style" :
{
"navigationBarTitleText": "验证码登录",
"enablePullDownRefresh": false
}
},{
"path" : "pages/search/search",
"style" :
{
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/special/special",
"style" :
{
"navigationBarTitleText": "广西省民政厅决策系统",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/special/comprehensive/comprehensive",
"style" :
{
"navigationBarTitleText": "综合表",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/special/marriage/marriage",
"style" :
{
"navigationBarTitleText": "婚姻汇总",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/special/rescue/rescue",
"style" :
{
"navigationBarTitleText": "救助汇总",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/special/funeral/funeral",
"style" :
{
"navigationBarTitleText": "殡仪汇总",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/special/organization/organization",
"style" :
{
"navigationBarTitleText": "组织统计",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#999999",
"selectedColor": "#1296db",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/homepage/homepage",
"iconPath": "static/index.png",
"selectedIconPath": "static/indexChoice.png",
"text": "首页"
},{
"pagePath": "pages/special/special",
"iconPath": "static/zhuanti.png",
"selectedIconPath": "static/zhuantiChoice.png",
"text": "专题"
},{
"pagePath": "pages/search/search",
"iconPath": "static/sousuo.png",
"selectedIconPath": "static/sousuoChoice.png",
"text": "搜索"
}]
}
}
<template>
<view class="content">
<view class="box">
<image src="../../static/地图.png" mode="" class="Map"></image>
</view>
<view class="list">
<t-table @change="change" >
<t-tr color="#fff">
<t-th>类型</t-th>
<t-th>2021年</t-th>
<t-th>2020年</t-th>
<t-th>2019年</t-th>
</t-tr>
<t-tr v-for="item in tableList" :key="item.id" >
<t-td>{{ item.id }}</t-td>
<t-td>{{ item.name }}</t-td>
<t-td>{{ item.age }}</t-td>
<t-td>{{ item.hobby }}</t-td>
</t-tr>
</t-table>
</view>
</view>
</template>
<script>
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
components: {
tTable,
tTh,
tTr,
tTd
},
data() {
return {
tableList: [{
id: '婚姻信息',
name: "858",
age: "10000",
hobby: "99999",
}, {
id: '养老信息',
name: "88",
age: "22000",
hobby: "666666",
}]
}
},
onLoad() {
},
methods: {
change(e) {
console.log(e.detail);
},
Change() {
uni.navigateTo({
url: "change/change"
})
},
}
}
</script>
<style>
page {
background-color: #0b1940;
}
.list {
margin-top: 60rpx;
width: 700rpx;
}
.box {
margin-top: 60rpx;
width: 100%;
height: 650rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.Map {
width: 100%;
height: 100%;
}
</style>
<template>
<view class="content">
<view class="title"><b class="center">决 策 分 析</b></view>
<view class="subhead"><b>广西民政厅</b></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
this.timedJump();
},
methods: {
//定时跳转
timedJump() {
console.log('--------------');
setTimeout(() => {
uni.navigateTo({
url: "../signIn/index"
})
}, 3000)
console.log('++++++++++++');
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-area {
display: flex;
justify-content: center;
}
/* .center{
text-align:center;
} */
.title {
font-size: 80rpx;
color: #DD524D;
margin-top: 50%;
}
.subhead {
font-size: 38rpx;
color: #333;
margin-top: 40rpx;
}
</style>
<template>
<view class="content">
<view class="box">
<view class="account k-flex-between-center">
<input type="text" value="" placeholder="验证码" />
<view class="margin10">
|
</view>
<view @click="findThePassword">获取验证码</view>
</view>
<view class="account">
<input type="text" value="" placeholder=" 请输入新密码(6-20位英文或数字)" />
</view>
<view class="loginButton">
<button type="primary" @click="sign()">登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
sign() {
uni.switchTab({
url: "../../homepage/homepage"
})
},
}
}
</script>
<style>
.margin10 {
margin-right: 6rpx;
}
.box {
width: 550rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.account {
white-space:nowrap;
color: #bcbcbc;
margin-top: 40rpx;
border: 2rpx solid #d9d9d9;
border-radius: 10rpx;
padding: 10px;
}
.loginButton {
margin-top: 60rpx;
}
</style>
<template>
<view class="content">
<view class="box">
<view class="account k-flex">
<view class="margin10">+18</view>
<view class="margin10">|</view>
<input type="text" value="" placeholder="手机号" />
</view>
<view class="loginButton">
<button type="primary" @click="Change()">下一步</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
Change() {
uni.navigateTo({
url: "change/change"
})
},
}
}
</script>
<style>
.margin10{
margin-right: 6rpx;
}
.box {
width: 550rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mark {
margin-top: 160rpx;
}
.title {
font-size: 50rpx;
color: #333;
margin-top: 90rpx;
margin-bottom: 90rpx;
}
.account {
color: #bcbcbc;
margin-top: 40rpx;
border: 2rpx solid #d9d9d9;
border-radius: 10rpx;
padding: 10px;
}
.account input {
line-height: 120rpx;
}
.loginButton {
margin-top: 60rpx;
}
.verification {
color: #4891D4;
margin-top: 60rpx;
text-align: center;
}
</style>
<template>
<view class="content">
<view class="box">
<view class="account k-flex">
<view class="margin10">
<image src="../../static/sousuo.png" mode="" class="imgClass"></image>
</view>
<input type="text" value="" placeholder="搜索" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
Change() {
uni.navigateTo({
url: "./verifyLogin/verifyLogin"
})
},
}
}
</script>
<style>
.imgClass{
width: 40rpx;
height: 40rpx;
}
.margin10{
margin-right: 6rpx;
}
.box {
width: 550rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mark {
margin-top: 160rpx;
}
.title {
font-size: 50rpx;
color: #333;
margin-top: 90rpx;
margin-bottom: 90rpx;
}
.account {
color: #bcbcbc;
margin-top: 40rpx;
border: 2rpx solid #d9d9d9;
border-radius: 40rpx;
padding: 16rpx 0 8rpx 16rpx;
}
.account input {
line-height: 120rpx;
}
.loginButton {
margin-top: 60rpx;
}
.verification {
color: #4891D4;
margin-top: 60rpx;
text-align: center;
}
</style>
<template>
<view class="content">
<view class="box">
<view class="mark">广西民政厅</view>
<view class="title"><b>决策分析掌上系统</b></view>
<view class="account">
<input type="text" value="" placeholder="手机号" />
</view>
<view class="account k-flex-between-center">
<input type="text" value="" placeholder="密码" />
|
<view @click="findThePassword">找回密码</view>
</view>
<view class="loginButton">
<button type="primary" @click="sign(0)">登录</button>
</view>
<view class="verification" @click=sign(1)>验证码登录</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
findThePassword() {
uni.navigateTo({
url: "../retrieve/retrieve"
})
},
sign(val) {
if (val == 0) {
console.log(val);
uni.switchTab({
url: "../homepage/homepage"
})
} else {
console.log(val);
uni.navigateTo({
url: "../verification/verification"
})
}
},
}
}
</script>
<style>
.box {
width: 550rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mark {
margin-top: 160rpx;
}
.title {
font-size: 50rpx;
color: #333;
margin-top: 90rpx;
margin-bottom: 90rpx;
}
.account {
color: #bcbcbc;
margin-top: 40rpx;
border: 2rpx solid #d9d9d9;
border-radius: 10rpx;
padding: 10px;
}
.loginButton {
margin-top: 100rpx;
}
.verification {
color: #4891D4;
margin-top: 60rpx;
text-align: center;
}
</style>
<template>
<view class="content" @click="useOutClickSide">
<view class="box k-flex">
<view class="height1 C8C7CC">
行政区划
</view>
<easy-select ref="easySelect" size="medium" :value="selecValue" @selectOne="selectOne"></easy-select>
</view>
<view class="modular">
<view class="">
<b>待办事项</b>
</view>
<view class="k-flex">
<view class="boxq marginRight marginTop20">
<view class="smallBox">
<view class="business">
门牌办理
</view>
<view class="k-flex">
<view class="number">
79
</view>
<view class="number">
</view>
</view>
</view>
<view class="smallBox marginTop20">
<view class="business">
地名证明
</view>
<view class="k-flex">
<view class="number">
39
</view>
<view class="number">
</view>
</view>
</view>
</view>
<view class="bigBox marginTop20 ">
<view class="business">
地名核准
</view>
<view class="k-flex">
<view class="number">
251
</view>
<view class="number">
</view>
</view>
</view>
</view>
</view>
<view class="modular">
<view class="k-flex">
<view class="wide">
<b>上图统计</b>
</view>
<view class="topRight k-flex-around-center">
<view class="tapBox k-flex-around-center " :class=" tapRightTab == index ? 'white': 'transparent'" v-for="item,index in topRightLite"
:key="index" @click="tapRightClick(index)">
{{item.name}}
</view>
</view>
</view>
<view class="k-flex" v-if="tapRightTab == 0">
<view class="statisticsAbove ">
<view class="k-flex leftStatisticsTop">
<b class="blue widt10"></b>
<view class="">
属性数据总量
</view>
</view>
<view class="blue leftNumber">
3054688
</view>
<view class="k-flex leftStatistics">
<b class="green widt10"></b>
<view class="">
图属关联量
</view>
</view>
<view class="green leftNumber">
157440(51.03%)
</view>
</view>
<view class="statisticsAbove">
<view class="charts-box">
<qiun-data-charts type="arcbar" :chartData="chartData" background="none" :opts="opts" />
</view>
</view>
</view>
<view class="k-flex" v-if="tapRightTab == 0">
<view class="statisticsAbove ">
<view class="k-flex leftStatisticsTop">
<b class="blue widt10"></b>
<view class="">
本月数据增量
</view>
</view>
<view class="blue leftNumber">
209
</view>
<view class="k-flex leftStatistics">
<b class="green widt10"></b>
<view class="">
图属关联量
</view>
</view>
<view class="green leftNumber">
44(21.05%)
</view>
</view>
<view class="statisticsAbove">
<view class="charts-box">
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartDataOne" :errorShow="false"
:errorReload="false" background="none" :animation="false" :tooltipShow="false"
:tapLegend="false" :ontap="false" :onmouse="false" :opts="optsOne" />
</view>
</view>
</view>
</view>
</view>
<view class="modular">
<view class="">
<view class="wide">
<b>业务统计</b>
</view>
</view>
<view class="daTapBox k-flex-around-center ">
<view class="tapBox k-flex-around-center " :class=" currenTab == index ? 'white': 'transparent'" v-for="item,index in tapLite"
:key="index" @click="tapClick(index)">
{{item.name}}
</view>
</view>
<view class="businessTable">
<uni-table border stripe emptyText="暂无更多数据" >
<uni-tr >
<uni-th align="center" width="180rpx">行政区划</uni-th>
<uni-th align="center" width="180rpx">个人编制</uni-th>
<uni-th align="center" width="180rpx">单位编制</uni-th>
<uni-th align="center" width="180rpx">个人变更</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr v-for="(item,index) in dataLite" :key="index">
<uni-td align="center" >{{item.region}}</uni-td>
<uni-td align="center" >{{item.personal}}</uni-td>
<uni-td align="center" >{{item.Company}}</uni-td>
<uni-td align="center" >{{item.change}}</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</template>
<script>
import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
export default {
components: {
selectSwitch
},
data() {
return {
tapRightTab:0,
currenTab: 0,
dataLite:[{
region:"南宁",
personal:"2000",
Company:"200",
change:"100",
},{
region:"南宁",
personal:"2000",
Company:"200",
change:"100",
}],
topRightLite:[{
name:'地名'
},
{
name:'门牌'
}],
tapLite: [{
name: "本年"
},
{
name: "本月"
},
{
name: "昨日"
},
],
selecValue: '南宁市',
//上图
chartData: {
categories: [],
series: [{
"name": "正确率",
"data": 0.6,
"color": "#4CD964"
},
{
"name": "正确率",
"data": 0.8,
"color": "#4891D4"
},
],
},
//上图配置
opts: {
"extra": {
"arcbar": {
"type": "circle",
"width": 12,
"backgroundColor": "#E9E9E9",
"startAngle": 0.75,
"endAngle": 0.25,
"gap": 2,
"centerX": 0,
"centerY": 0,
"linearType": "none"
}
},
"title": {
"name": "52.6%",
"fontSize": 25,
"color": "#00FF00",
"offsetX": 0,
"offsetY": 0
},
"subtitle": {
"name": "上图率",
"fontSize": 15,
"color": "#666666",
"offsetX": 0,
"offsetY": 0
},
},
//本月
chartDataOne: {
categories: [
"2016",
"2017"
],
"series": [{
"name": "目标值",
"data": [
35,
36
],
},
{
"name": "完成量",
"data": [
30,
0
],
"color": "#4891D4",
},
{
"name": "完成量",
"data": [
0,
15
],
"color": "#4CD964",
},
]
},
optsOne: {
"dataLabel": false,
"legend": {
"show": false,
},
"yAxis": {
"disabled": true,
"disableGrid": true,
},
"xAxis": {
"disabled": true,
"disableGrid": true,
"axisLine": false,
},
"extra": {
"column": {
"type": "meter",
"width": 30,
"seriesGap": 2,
"categoryGap": 3,
"barBorderCircle": true,
"linearType": "none",
"linearOpacity": 1,
"colorStop": 0,
"meterBorder": 0,
"meterFillColor": "#f6f6f6",
"activeBgColor": "#000000",
"activeBgOpacity": 0.08,
"meterBorde": 1
},
},
"tooltip": {
"showBox": false,
}
}
};
},
methods: {
selectOne(options) {
this.selecValue = options.label
},
useOutClickSide() {
this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
},
changeSwitch(isSwitch) { // isSwitch:当前开关状态
},
tapClick(e) {
console.log(e)
this.currenTab = e
},
tapRightClick(e) {
console.log(e)
this.tapRightTab = e
},
},
}
</script>
<style>
.C8C7CC {
color: #C8C7CC;
}
.height1 {
line-height: 85rpx;
}
.blue {
color: #4891D4;
}
.green {
color: #4CD964;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
width: 700rpx;
border-bottom: 2rpx solid #3F536E;
}
.modular {
margin-top: 20rpx;
width: 700rpx;
}
.widt10 {
width: 40rpx;
}
.marginRight {
margin-right: 10rpx;
}
.boxq {
width: 350rpx;
height: 400rpx;
}
.statisticsAbove {
width: 350rpx;
height: 500rpx;
}
.marginTop20 {
margin-top: 20rpx;
}
.smallBox {
width: 330rpx;
height: 180rpx;
background-color: #f4f9ff;
}
.bigBox {
width: 350rpx;
height: 380rpx;
background-color: #f4f9ff;
}
.business {
padding: 30rpx 0 20rpx 60rpx;
}
.number {
margin-left: 60rpx;
margin-right: 20rpx;
font-size: 52rpx;
}
.wide {
width: 600rpx;
}
.leftStatisticsTop {
margin: 160rpx 0 10rpx 50rpx;
}
.leftStatistics {
margin: 30rpx 0 10rpx 50rpx;
}
.leftNumber {
margin: 0 0 10rpx 90rpx;
}
.topRight{
width: 200rpx;
padding: 8rpx;
margin-top: -10rpx;
background-color: #F5F5F5;
border-radius: 10rpx;
}
.daTapBox {
width: 500rpx;
padding: 8rpx;
margin: 20rpx auto;
background-color: #F5F5F5;
border-radius: 10rpx;
}
.tapBox {
width: 150rpx;
height: 50rpx;
border-radius: 10rpx;
}
.white{
background-color: #fff;
}
.transparent{
background-color: #F5F5F5;
}
.businessTable{
width:700rpx;
height: 20rpx;
background-color: #007AFF;
}
.white180{
width: 180rpx;
}
</style>
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="less">
</style>
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="less">
</style>
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="less">
</style>
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="less">
</style>
<template>
<view class="content">
<view class="special k-flex" v-for="item in liet" :key="item.id" @click="clickJump(item.id)">
<view class="img">
<image :src="item.src" mode="" class="imgClass"></image>
</view>
<view class="text">
{{ item.name}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
liet: [{
id: "1",
src: "../../static/tubiao.png",
name: "综合表"
},
{
id: "2",
src: "../../static/tubiao1.png",
name: "婚姻汇总"
},
{
id: "3",
src: "../../static/chart.png",
name: "救助汇总"
},
{
id: "4",
src: "../../static/tubiao1_1.png",
name: "殡仪汇总"
},
{
id: "5",
src: "../../static/tubiao01.png",
name: "组织统计"
},
]
};
},
onLoad() {
},
methods: {
clickJump(val) {
if (val == 1) {
uni.navigateTo({
url: "./comprehensive/comprehensive"
})
console.log(val);
} else if (val == 2) {
uni.navigateTo({
url: "./marriage/marriage"
})
console.log(val);
} else if (val == 3) {
uni.navigateTo({
url: "./rescue/rescue"
})
console.log(val);
} else if (val == 4) {
uni.navigateTo({
url: "./funeral/funeral"
})
console.log(val);
} else if (val == 5) {
uni.navigateTo({
url: "./organization/organization"
})
console.log(val);
}
},
}
}
</script>
<style>
.text {
line-height: 120rpx;
}
.img {
margin: 20rpx;
}
.imgClass {
width: 80rpx;
height: 80rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.special {
width: 100%;
border-bottom: 2rpx solid #D9D9D9;
}
</style>
<template>
<view class="content">
<view class="box">
<view class="account k-flex">
<view class="margin10">+18</view>
<view class="margin10">|</view>
<input type="text" value="" placeholder="手机号" />
</view>
<view class="loginButton">
<button type="primary" @click="Change()">下一步</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
Change() {
uni.navigateTo({
url: "./verifyLogin/verifyLogin"
})
},
}
}
</script>
<style>
.margin10{
margin-right: 6rpx;
}
.box {
width: 550rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mark {
margin-top: 160rpx;
}
.title {
font-size: 50rpx;
color: #333;
margin-top: 90rpx;
margin-bottom: 90rpx;
}
.account {
color: #bcbcbc;
margin-top: 40rpx;
border: 2rpx solid #d9d9d9;
border-radius: 10rpx;
padding: 10px;
}
.account input {
line-height: 120rpx;
}
.loginButton {
margin-top: 60rpx;
}
.verification {
color: #4891D4;
margin-top: 60rpx;
text-align: center;
}
</style>
<template>
<view class="content">
<view class="box">
<view class="account k-flex-between-center">
<input type="text" value="" placeholder="验证码" />
<view class="margin10">
|
</view>
<view @click="findThePassword">获取验证码</view>
</view>
<view class="loginButton">
<button type="primary" @click="sign()">登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
sign() {
uni.switchTab({
url: "../../homepage/homepage"
})
},
}
}
</script>
<style>
.margin10 {
margin-right: 6rpx;
}
.box {
width: 550rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.account {
white-space:nowrap;
color: #bcbcbc;
margin-top: 40rpx;
border: 2rpx solid #d9d9d9;
border-radius: 10rpx;
padding: 10px;
}
.loginButton {
margin-top: 60rpx;
}
</style>
/* uni.scss */
// @import 'uview-ui/theme.scss';
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* dev 环境下,scss测试边框线 */
$border-blue:1rpx dashed blue;
$border-red:1rpx dashed #ff0000;
$border-orange:1rpx dashed #ff6600;
/* App常用scss函数 */
@mixin flex($justify,$align,$direction) {
display: flex;
@if $direction {
flex-direction: $direction;
}
justify-content: $justify;
align-items: $align;
}
/* 超出单行换行 */
%ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 位置 */
@mixin position($type:relative,$top:0rpx,$left:0rpx) {
position: $type;
top: $top;
left:$left;
}
/* 调整自身位置 */
@mixin translate($column:-50%,$row:-50%) {
// transform: translateX($row);
// transform: translateY($column);
transform: translate($row,$column);
}
/* 颜色变量 */
/* App主题色 */
$app-main-color:#8645FD;
$app-order-ts-color: #DA37FD;
$app-order-wm-color:#4c64fd ;
/* 通用插槽button.scss */
.app-slot-button {
width: 200rpx;
height: 72rpx;
color: #fff;
@include flex(center,center,'');
border-radius: $uni-border-radius-sm;
}
/* 基本样式 */
.app-slot-button-base {
background-color: $app-main-color;
}
/* 异常单按钮插槽 样式*/
.app-slot-button-error {
background-color: $app-order-ts-color;
}
/* 边框盒子 */
$b-box:border-box;
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 8rpx;
$uni-border-radius-base: 15rpx;
$uni-border-radius-lg: 24rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
\ No newline at end of file
<template>
<view class="chartsview">
<view class="charts-error"></view>
<view class="charts-font">{{errorMessage==null?'请点击重试':errorMessage}}</view>
</view>
</template>
<script>
export default {
name: 'qiun-error',
props: {
errorMessage: {
type: String,
default: null
},
},
data() {
return {
};
},
}
</script>
<style>
.chartsview {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
}
.charts-font{
font-size: 14px;
color: #CCCCCC;
margin-top: 10px;
}
.charts-error{
width: 128px;
height: 128px;
background: url("data:image/png;base64,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");
background-position: center;
}
</style>
<template>
<view class="container loading1">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading1',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading1 .shape1 {
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
animation: animation1shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
@keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
.loading1 .shape2 {
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
animation: animation1shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
@keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
.loading1 .shape3 {
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
animation: animation1shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
@keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
.loading1 .shape4 {
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
animation: animation1shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
@keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
</style>
<template>
<view class="container loading2">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading2',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading2 {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.container.loading2 .shape {
border-radius: 5px;
}
.container.loading2{
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading2 .shape1 {
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
animation: animation2shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
.loading2 .shape2 {
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
animation: animation2shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
.loading2 .shape3 {
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
animation: animation2shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
.loading2 .shape4 {
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
animation: animation2shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
</style>
<template>
<view class="container loading3">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading3',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading3 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading3 .shape1 {
border-top-left-radius: 10px;
}
.container.loading3 .shape2 {
border-top-right-radius: 10px;
}
.container.loading3 .shape3 {
border-bottom-left-radius: 10px;
}
.container.loading3 .shape4 {
border-bottom-right-radius: 10px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading3 .shape1 {
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
animation: animation3shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
@keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
.loading3 .shape2 {
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
animation: animation3shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
@keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
.loading3 .shape3 {
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
animation: animation3shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
@keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
.loading3 .shape4 {
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
animation: animation3shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
@keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
</style>
<template>
<view class="container loading5">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading5',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading5 .shape {
width: 15px;
height: 15px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading5 .shape1 {
animation: animation5shape1 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
@keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
.loading5 .shape2 {
animation: animation5shape2 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
@keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
.loading5 .shape3 {
animation: animation5shape3 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
@keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
.loading5 .shape4 {
animation: animation5shape4 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
@keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
</style>
<template>
<view class="container loading6">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading6',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading6 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading6 .shape {
width: 12px;
height: 12px;
border-radius: 2px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading6 .shape1 {
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
animation: animation6shape1 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
@keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
.loading6 .shape2 {
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
animation: animation6shape2 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
@keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
.loading6 .shape3 {
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
animation: animation6shape3 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
@keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
.loading6 .shape4 {
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
animation: animation6shape4 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
@keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
</style>
<template>
<view>
<Loading1 v-if="loadingType==1"/>
<Loading2 v-if="loadingType==2"/>
<Loading3 v-if="loadingType==3"/>
<Loading4 v-if="loadingType==4"/>
<Loading5 v-if="loadingType==5"/>
</view>
</template>
<script>
import Loading1 from "./loading1.vue";
import Loading2 from "./loading2.vue";
import Loading3 from "./loading3.vue";
import Loading4 from "./loading4.vue";
import Loading5 from "./loading5.vue";
export default {
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
name: 'qiun-loading',
props: {
loadingType: {
type: Number,
default: 2
},
},
data() {
return {
};
},
}
</script>
<style>
</style>
/*
* uCharts®
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释,感谢支持开源!
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址:
* http://ext.dcloud.net.cn/plugin?id=271
*
*/
// 通用配置项
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
module.exports = {
//demotype为自定义图表类型
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
//instance为实例变量承载属性,option为eopts承载属性,不要删除
"instance": {},
"option": {},
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
"formatter":{
"tooltipDemo1":function(res){
let result = ''
for (let i in res) {
if (i == 0) {
result += res[i].axisValueLabel + '年销售额'
}
let value = '--'
if (res[i].data !== null) {
value = res[i].data
}
// #ifdef H5
result += '\n' + res[i].seriesName + ':' + value + ' 万元'
// #endif
// #ifdef APP-PLUS
result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元'
// #endif
}
return result;
},
legendFormat:function(name){
return "自定义图例+"+name;
},
yAxisFormatDemo:function (value, index) {
return value + '元';
},
seriesFormatDemo:function(res){
return res.name + '年' + res.value + '元';
}
},
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
"demotype":{
"color": color,
//在这里填写echarts的option即可
},
//下面是自定义配置,请添加项目所需的通用配置
"column": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'bar',
"data": [],
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"line": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'line',
"data": [],
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"area": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'line',
"data": [],
"areaStyle": {},
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"pie": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"grid": {
"top": 40,
"bottom": 30,
"right": 15,
"left": 15
},
"legend": {
"bottom": 'left',
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": '50%',
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"ring": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"grid": {
"top": 40,
"bottom": 30,
"right": 15,
"left": 15
},
"legend": {
"bottom": 'left',
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": ['40%', '70%'],
"avoidLabelOverlap": false,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
"labelLine": {
"show": true
},
},
},
"rose": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"legend": {
"top": 'bottom'
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": "55%",
"center": ['50%', '50%'],
"rosetype": 'area',
},
},
"funnel": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item',
"formatter": "{b} : {c}%"
},
"legend": {
"top": 'bottom'
},
"seriesTemplate": {
"name": '',
"type": 'funnel',
"left": '10%',
"top": 60,
"bottom": 60,
"width": '80%',
"min": 0,
"max": 100,
"minSize": '0%',
"maxSize": '100%',
"sort": 'descending',
"gap": 2,
"label": {
"show": true,
"position": 'inside'
},
"labelLine": {
"length": 10,
"lineStyle": {
"width": 1,
"type": 'solid'
}
},
"itemStyle": {
"bordercolor": '#fff',
"borderwidth": 1
},
"emphasis": {
"label": {
"fontSize": 20
}
},
"data": [],
},
},
"gauge": {
"color": color,
"tooltip": {
"formatter": '{a} <br/>{b} : {c}%'
},
"seriesTemplate": {
"name": '业务指标',
"type": 'gauge',
"detail": {"formatter": '{value}%'},
"data": [{"value": 50, "name": '完成率'}]
},
},
"candle": {
"xAxis": {
"data": []
},
"yAxis": {},
"color": color,
"title": {
"text": ''
},
"dataZoom": [{
"type": 'inside',
"xAxisIndex": [0, 1],
"start": 10,
"end": 100
},
{
"show": true,
"xAxisIndex": [0, 1],
"type": 'slider',
"bottom": 10,
"start": 10,
"end": 100
}
],
"seriesTemplate": {
"name": '',
"type": 'k',
"data": [],
},
}
}
# uCharts JSSDK说明
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`98kb`
2、如果100kb的体积仍需压缩,请手动删除u-charts.js内您不需要的图表类型,如k线图candle。
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。
3、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。
# v1.0转v2.0注意事项
1、opts.colors变更为opts.color
2、ring圆环图的扩展配置由extra.pie变更为extra.ring
3、混合图借用的扩展配置由extra.column变更为extra.mix.column
4、全部涉及到format的格式化属性变更为formatter
5、不需要再传canvasId及$this参数,如果通过uChats获取context,可能会导致this实例混乱,导致小程序开发者工具报错。如果不使用qiun-data-charts官方组件,需要在new uCharts()实例化之前,自行获取canvas的上下文context(ctx),并传入new中的context(opts.context)。为了能跨更多的端,给您带来的不便敬请谅解。
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"id": "qiun-data-charts",
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
"version": "2.3.1-20210616",
"description": "uCharts v2.3上线,支持nvue!全新官方图表组件,支持H5及APP用ECharts渲染图表,uniapp可视化首选组件",
"keywords": [
"ucharts",
"echarts",
"f2",
"图表",
"可视化"
],
"repository": "https://gitee.com/uCharts/uCharts",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "474119"
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "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"
}
}
}
}
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
## 1.0.46(2021-06-04)
- 修复 动态删减数据导致报错的问题
## 1.0.45(2021-06-04)
- 新增 modelValue 属性 ,value 即将废弃
## 1.0.44(2021-06-02)
- 新增 uni-forms-item 可以设置单独的 rules
- 新增 validate 事件增加 keepitem 参数,可以选择那些字段不过滤
- 优化 submit 事件重命名为 validate
## 1.0.43(2021-05-12)
- 新增 组件示例地址
## 1.0.42(2021-04-30)
- 修复 自定义检验器失效的问题
## 1.0.41(2021-03-05)
- 更新 校验器
- 修复 表单规则设置类型为 number 的情况下,值为0校验失败的Bug
## 1.0.40(2021-03-04)
- 修复 动态显示uni-forms-item的情况下,submit 方法获取值错误的Bug
## 1.0.39(2021-02-05)
- 调整为uni_modules目录规范
- 修复 校验器传入 int 等类型 ,返回String类型的Bug
{
"id": "uni-forms",
"displayName": "uni-forms 表单",
"version": "1.0.46",
"description": "由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据",
"keywords": [
"uni-ui",
"uniui",
"表单",
"表单校验",
"表单验证"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"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": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "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"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## 1.1.5(2021-05-12)
- 新增 组件示例地址
## 1.1.4(2021-02-05)
- 调整为uni_modules目录规范
export default {
"pulldown": "\ue588",
"refreshempty": "\ue461",
"back": "\ue471",
"forward": "\ue470",
"more": "\ue507",
"more-filled": "\ue537",
"scan": "\ue612",
"qq": "\ue264",
"weibo": "\ue260",
"weixin": "\ue261",
"pengyouquan": "\ue262",
"loop": "\ue565",
"refresh": "\ue407",
"refresh-filled": "\ue437",
"arrowthindown": "\ue585",
"arrowthinleft": "\ue586",
"arrowthinright": "\ue587",
"arrowthinup": "\ue584",
"undo-filled": "\ue7d6",
"undo": "\ue406",
"redo": "\ue405",
"redo-filled": "\ue7d9",
"bars": "\ue563",
"chatboxes": "\ue203",
"camera": "\ue301",
"chatboxes-filled": "\ue233",
"camera-filled": "\ue7ef",
"cart-filled": "\ue7f4",
"cart": "\ue7f5",
"checkbox-filled": "\ue442",
"checkbox": "\ue7fa",
"arrowleft": "\ue582",
"arrowdown": "\ue581",
"arrowright": "\ue583",
"smallcircle-filled": "\ue801",
"arrowup": "\ue580",
"circle": "\ue411",
"eye-filled": "\ue568",
"eye-slash-filled": "\ue822",
"eye-slash": "\ue823",
"eye": "\ue824",
"flag-filled": "\ue825",
"flag": "\ue508",
"gear-filled": "\ue532",
"reload": "\ue462",
"gear": "\ue502",
"hand-thumbsdown-filled": "\ue83b",
"hand-thumbsdown": "\ue83c",
"hand-thumbsup-filled": "\ue83d",
"heart-filled": "\ue83e",
"hand-thumbsup": "\ue83f",
"heart": "\ue840",
"home": "\ue500",
"info": "\ue504",
"home-filled": "\ue530",
"info-filled": "\ue534",
"circle-filled": "\ue441",
"chat-filled": "\ue847",
"chat": "\ue263",
"mail-open-filled": "\ue84d",
"email-filled": "\ue231",
"mail-open": "\ue84e",
"email": "\ue201",
"checkmarkempty": "\ue472",
"list": "\ue562",
"locked-filled": "\ue856",
"locked": "\ue506",
"map-filled": "\ue85c",
"map-pin": "\ue85e",
"map-pin-ellipse": "\ue864",
"map": "\ue364",
"minus-filled": "\ue440",
"mic-filled": "\ue332",
"minus": "\ue410",
"micoff": "\ue360",
"mic": "\ue302",
"clear": "\ue434",
"smallcircle": "\ue868",
"close": "\ue404",
"closeempty": "\ue460",
"paperclip": "\ue567",
"paperplane": "\ue503",
"paperplane-filled": "\ue86e",
"person-filled": "\ue131",
"contact-filled": "\ue130",
"person": "\ue101",
"contact": "\ue100",
"images-filled": "\ue87a",
"phone": "\ue200",
"images": "\ue87b",
"image": "\ue363",
"image-filled": "\ue877",
"location-filled": "\ue333",
"location": "\ue303",
"plus-filled": "\ue439",
"plus": "\ue409",
"plusempty": "\ue468",
"help-filled": "\ue535",
"help": "\ue505",
"navigate-filled": "\ue884",
"navigate": "\ue501",
"mic-slash-filled": "\ue892",
"search": "\ue466",
"settings": "\ue560",
"sound": "\ue590",
"sound-filled": "\ue8a1",
"spinner-cycle": "\ue465",
"download-filled": "\ue8a4",
"personadd-filled": "\ue132",
"videocam-filled": "\ue8af",
"personadd": "\ue102",
"upload": "\ue402",
"upload-filled": "\ue8b1",
"starhalf": "\ue463",
"star-filled": "\ue438",
"star": "\ue408",
"trash": "\ue401",
"phone-filled": "\ue230",
"compose": "\ue400",
"videocam": "\ue300",
"trash-filled": "\ue8dc",
"download": "\ue403",
"chatbubble-filled": "\ue232",
"chatbubble": "\ue202",
"cloud-download": "\ue8e4",
"cloud-upload-filled": "\ue8e5",
"cloud-upload": "\ue8e6",
"cloud-download-filled": "\ue8e9",
"headphones":"\ue8bf",
"shop":"\ue609"
}
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.1.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"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": "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"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
``template`` 中使用组件
```html
<uni-icons type="contact" size="30"></uni-icons>
```
## API
### Icons Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|size |Number |24 |图标大小 |
|type |String |- |图标图案,参考示例 |
|color |String |- |图标颜色 |
### Icons Events
|事件名 |说明 |返回值|
|:-: |:-: |:-: |
|@click|点击 Icon 触发事件|- |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
\ No newline at end of file
## 1.0.4(2021-05-12)
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.3(2021-04-16)
- 新增 sortable 属性,是否开启单列排序
- 优化 表格多选逻辑
## 1.0.2(2021-03-22)
- uni-tr 添加 disabled 属性,用于 type=selection 时,设置某行是否可由全选按钮控制
## 1.0.1(2021-02-05)
- 调整为uni_modules目录规范
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment