HB
/
ruoyi-miniapp
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改首页样式

master
爱~海~爱海爱海~右 1 month ago
parent
312a1f5283
commit
28177e5c0f
5 changed files with 115 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      pages/enterprise.vue
  2. 61
      pages/index.vue
  3. 2
      pages/task.vue
  4. 5
      static/scss/global.scss
  5. 123
      uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js

7
pages/enterprise.vue
Unescape View File

@ -116,7 +116,7 @@
:status="load"
marginTop="12"
marginBottom="12"
v-if="load !== 'nomore'"
v-if="load !== 'nomore' && list.length > 0"
/>
<cs-emty v-if="list.length == 0"></cs-emty>
</scroll-view>
@ -154,10 +154,11 @@ export default {
},
async onLoad() {
await this.getDict()
},
onShow() {
this.queryEnterprise()
},
// onShow() {
// this.queryEnterprise()
// },
onReady() {
this.getPageHeight()
},

61
pages/index.vue
Unescape View File

@ -47,6 +47,7 @@
bold
font-size="24"
color="#071437"
class="number"
></u-count-to>
<view class="">任务数量</view>
</view>
@ -82,31 +83,31 @@
:opts="opts"
:chartData="chartData"
:canvas2d="true"
style="height: 144px"
style="height: 288rpx"
></qiun-data-charts>
<view class="wd-flex" style="gap: 12px; flex-wrap: wrap">
<view class="wd-flex" style="gap: 24rpx; flex-wrap: wrap">
<view
class="wd-flex wd-flex-col wd-flex-center"
v-for="item in detail.legendData"
:key="item"
style="
border: 1px solid #f9f9f9;
width: calc(100% / 3 - 8px);
padding: 12px;
gap: 4px;
border-radius: 4px;
border: 2rpx solid #f9f9f9;
width: calc(100% / 3 - 16rpx);
padding: 24rpx;
gap: 8rpx;
border-radius: 8rpx;
"
>
<view class="wd-flex wd-flex-col" style="gap: 4px">
<view class="wd-flex wd-flex-col" style="gap: 8rpx">
<view
class="wd-flex"
style="align-items: center; gap: 4px"
style="align-items: center; gap: 8rpx"
>
<view
:style="{
width: '8px',
height: '4px',
borderRadius: '4px',
width: '16rpx',
height: '8rpx',
borderRadius: '8rpx',
backgroundColor: item.color
}"
></view>
@ -120,7 +121,7 @@
font-size="16"
color="#071437"
></u-count-to>
%
<text class="number">%</text>
</view>
</view>
</view>
@ -153,7 +154,11 @@
class="name"
:style="{
color:
queryParams.type == item.type ? '#071437' : '#78829d'
queryParams.type == item.type
? '#071437'
: '#78829d',
fontWeight:
queryParams.type == item.type ? '800' : 'normal'
}"
>
{{ item.name }}
@ -169,14 +174,14 @@
style="justify-content: space-between; padding: 12px"
>
<view class="wd-font-800">{{ item.name }}</view>
<view class="wd-font-800" style="color: #ff6f1e">
<view class="wd-font-800" style="color: #17c653">
<view>
<u-count-to
:start-val="0"
:end-val="item.count"
bold
font-size="14"
color="#FF6F1E"
color="#17C653"
></u-count-to>
<text>{{ queryParams.type == 1 ? '天' : '次' }}</text>
</view>
@ -288,9 +293,11 @@ export default {
this.detail = res.data
let curIndex = 0
const colorMap = []
const split = 1 / this.detail.completionRate.length
const data = this.detail.completionRate.map((item, index) => {
const color = `rgba(4, 180, 64,${1 - split * (index + 1)})`
const color = this.getGradientColor(
index,
this.detail.completionRate.length
)
const res = {
...item,
color
@ -335,7 +342,8 @@ export default {
name: `${max}%`,
fontSize: 24,
color: '#071437',
fontWeight: 'bold'
fontWeight: 'bold',
fontFamily: 'Tahoma'
},
subtitle: {
name: '完成率',
@ -349,7 +357,8 @@ export default {
offsetAngle: 90,
labelWidth: 15,
border: false,
borderColor: '#FFFFFF',
borderColor: '#F9F9F9',
borderWidth: 0.5,
linearType: 'none'
}
}
@ -398,6 +407,10 @@ export default {
// 然后截取前两位小数
let realVal = tempVal.substring(0, tempVal.length - 1)
return realVal
},
getGradientColor(index, total) {
const opacity = 1 - index / total + 0.1
return `rgba(4, 180, 64, ${opacity})`
}
}
}
@ -407,6 +420,13 @@ export default {
.view-container {
height: 100%;
}
.number {
font-family: 'Tahoma';
}
::v-deep .u-count-num {
font-family: 'Tahoma';
}
.view {
padding: 0 24rpx;
padding-bottom: 24rpx;
@ -441,7 +461,6 @@ export default {
.name {
z-index: 2;
position: inherit;
font-weight: bold;
}
&:first-child::before {
content: '';

2
pages/task.vue
Unescape View File

@ -133,7 +133,7 @@
marginBottom="12"
v-if="load !== 'nomore'"
/>
<cs-emty v-if="list.length == 0"></cs-emty>
<cs-emty marginTop="24" v-if="list.length == 0"></cs-emty>
</scroll-view>
</view>
</cs-page>

5
static/scss/global.scss
Unescape View File

@ -1,3 +1,8 @@
@font-face {
font-family: 'Tahoma';
src: url('https://hb.jzce.com/Tahoma.ttf') format('truetype');
}
page {
background-color: #f9f9f9;
position: relative;

123
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js
Unescape View File

@ -22,56 +22,57 @@
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
const cfe = {
//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承载属性，不要删除
//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即可
},
//下面是自定义配置，请添加项目所需的通用配置
//下面是自定义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": ''
"text": '',
"fontFamoly": 'Tahoma'
},
"tooltip": {
"trigger": 'axis'
@ -122,7 +123,7 @@ const cfe = {
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"color": "#666666",
"position": 'top',
},
},
@ -181,7 +182,7 @@ const cfe = {
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"color": "#666666",
"position": 'top',
},
},
@ -240,7 +241,7 @@ const cfe = {
"areaStyle": {},
"label": {
"show": true,
"color": "#666666",
"color": "#666666",
"position": 'top',
},
},
@ -266,10 +267,10 @@ const cfe = {
"name": '',
"type": 'pie',
"data": [],
"radius": '50%',
"radius": '100%',
"label": {
"show": true,
"color": "#666666",
"color": "#666666",
"position": 'top',
},
},
@ -277,7 +278,8 @@ const cfe = {
"ring": {
"color": color,
"title": {
"text": ''
"text": '',
"fontFamoly": 'Tahoma'
},
"tooltip": {
"trigger": 'item'
@ -295,11 +297,11 @@ const cfe = {
"name": '',
"type": 'pie',
"data": [],
"radius": ['40%', '70%'],
"radius": ['40%', '100%'],
"avoidLabelOverlap": false,
"label": {
"show": true,
"color": "#666666",
"color": "#666666",
"position": 'top',
},
"labelLine": {
@ -378,13 +380,18 @@ const cfe = {
"gauge": {
"color": color,
"tooltip": {
"formatter": '{a} <br/>{b} : {c}%'
},
"formatter": '{a} <br/>{b} : {c}%'
},
"seriesTemplate": {
"name": '业务指标',
"type": 'gauge',
"detail": {"formatter": '{value}%'},
"data": [{"value": 50, "name": '完成率'}]
"type": 'gauge',
"detail": {
"formatter": '{value}%'
},
"data": [{
"value": 50,
"name": '完成率'
}]
},
},
"candle": {

Write Preview
Loading…
Cancel
Save