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

61
pages/index.vue
Unescape View File

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

2
pages/task.vue
Unescape View File

@ -133,7 +133,7 @@
marginBottom="12" marginBottom="12"
v-if="load !== 'nomore'" 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> </scroll-view>
</view> </view>
</cs-page> </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 { page {
background-color: #f9f9f9; background-color: #f9f9f9;
position: relative; 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 color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
const cfe = { const cfe = {
//demotype为自定义图表类型 //demotype为自定义图表类型
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"], "type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge", "candle", "demotype"],
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype" //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"], "categories": ["line", "column", "area", "radar", "gauge", "candle", "demotype"],
//instance为实例变量承载属性，option为eopts承载属性，不要删除 //instance为实例变量承载属性，option为eopts承载属性，不要删除
"instance": {}, "instance": {},
"option": {}, "option": {},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换 //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter":{ "formatter": {
"tooltipDemo1":function(res){ "tooltipDemo1": function(res) {
let result = '' let result = ''
for (let i in res) { for (let i in res) {
if (i == 0) { if (i == 0) {
result += res[i].axisValueLabel + '年销售额' result += res[i].axisValueLabel + '年销售额'
} }
let value = '--' let value = '--'
if (res[i].data !== null) { if (res[i].data !== null) {
value = res[i].data value = res[i].data
} }
// #ifdef H5 // #ifdef H5
result += '\n' + res[i].seriesName + '：' + value + ' 万元' result += '\n' + res[i].seriesName + '：' + value + ' 万元'
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元' result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
// #endif // #endif
} }
return result; return result;
}, },
legendFormat:function(name){ legendFormat: function(name) {
return "自定义图例+"+name; return "自定义图例+" + name;
}, },
yAxisFormatDemo:function (value, index) { yAxisFormatDemo: function(value, index) {
return value + '元'; return value + '元';
}, },
seriesFormatDemo:function(res){ seriesFormatDemo: function(res) {
return res.name + '年' + res.value + '元'; return res.name + '年' + res.value + '元';
} }
}, },
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。 //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
"demotype":{ "demotype": {
"color": color, "color": color,
//在这里填写echarts的option即可 //在这里填写echarts的option即可
}, },
//下面是自定义配置，请添加项目所需的通用配置 //下面是自定义配置，请添加项目所需的通用配置
"column": { "column": {
"color": color, "color": color,
"title": { "title": {
"text": '' "text": '',
"fontFamoly": 'Tahoma'
}, },
"tooltip": { "tooltip": {
"trigger": 'axis' "trigger": 'axis'
@ -122,7 +123,7 @@ const cfe = {
"barwidth": 20, "barwidth": 20,
"label": { "label": {
"show": true, "show": true,
"color": "#666666", "color": "#666666",
"position": 'top', "position": 'top',
}, },
}, },
@ -181,7 +182,7 @@ const cfe = {
"barwidth": 20, "barwidth": 20,
"label": { "label": {
"show": true, "show": true,
"color": "#666666", "color": "#666666",
"position": 'top', "position": 'top',
}, },
}, },
@ -240,7 +241,7 @@ const cfe = {
"areaStyle": {}, "areaStyle": {},
"label": { "label": {
"show": true, "show": true,
"color": "#666666", "color": "#666666",
"position": 'top', "position": 'top',
}, },
}, },
@ -266,10 +267,10 @@ const cfe = {
"name": '', "name": '',
"type": 'pie', "type": 'pie',
"data": [], "data": [],
"radius": '50%', "radius": '100%',
"label": { "label": {
"show": true, "show": true,
"color": "#666666", "color": "#666666",
"position": 'top', "position": 'top',
}, },
}, },
@ -277,7 +278,8 @@ const cfe = {
"ring": { "ring": {
"color": color, "color": color,
"title": { "title": {
"text": '' "text": '',
"fontFamoly": 'Tahoma'
}, },
"tooltip": { "tooltip": {
"trigger": 'item' "trigger": 'item'
@ -295,11 +297,11 @@ const cfe = {
"name": '', "name": '',
"type": 'pie', "type": 'pie',
"data": [], "data": [],
"radius": ['40%', '70%'], "radius": ['40%', '100%'],
"avoidLabelOverlap": false, "avoidLabelOverlap": false,
"label": { "label": {
"show": true, "show": true,
"color": "#666666", "color": "#666666",
"position": 'top', "position": 'top',
}, },
"labelLine": { "labelLine": {
@ -378,13 +380,18 @@ const cfe = {
"gauge": { "gauge": {
"color": color, "color": color,
"tooltip": { "tooltip": {
"formatter": '{a} <br/>{b} : {c}%' "formatter": '{a} <br/>{b} : {c}%'
}, },
"seriesTemplate": { "seriesTemplate": {
"name": '业务指标', "name": '业务指标',
"type": 'gauge', "type": 'gauge',
"detail": {"formatter": '{value}%'}, "detail": {
"data": [{"value": 50, "name": '完成率'}] "formatter": '{value}%'
},
"data": [{
"value": 50,
"name": '完成率'
}]
}, },
}, },
"candle": { "candle": {

Write Preview
Loading…
Cancel
Save